:root {
  --bg: #f3f4f7;
  --card: #ffffff;
  --ink: #18202f;
  --muted: #5d6779;
  --line: #e3e6ee;
  /* Markenfarbe = Gold aus dem Logo (v461). --brand-ink: Schrift AUF Gold (Nachtblau, wie das „F"),
     --brand-text: Gold als SCHRIFT auf Weiß — reines Gold wäre dort kaum lesbar. */
  --brand: #e0a83f;
  --brand-dark: #c48f2c;
  --brand-soft: #fbf1dc;
  --brand-ink: #1b2538;
  --brand-text: #8a5d10;
  --navy: #1f2a40;
  --navy-deep: #0e1422;
  --logo-red: #c62a22;
  --ok: #1a8f4c;
  /* Rot-Stufen, aufeinander abgestimmt (14.09.2026). Vorher: --warn #b00020
     (bräunliches Dunkelrot) und daneben ein knalliges Pink (#d6336c), das zu nichts
     im Farbsystem passte — die App ist grün. Jetzt eine saubere Leiter:
     --warn        für Symbole und Text (kräftig genug auf Weiß)
     --warn-strong für gefüllte Flächen
     --warn-bg     als zarter Hintergrund beim Darüberfahren
     --warn-line   für Ränder */
  --warn: #b42318;
  --warn-strong: #c62a22;
  --warn-bg: #fef3f2;
  --warn-line: #fecdca;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 6px 24px rgba(15, 23, 42, 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(15, 23, 42, .14); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--brand-text); }
.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-text); 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-text);
}

.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: var(--brand-ink); }
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: var(--brand-ink); 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-text); 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-text); }

.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(15, 23, 42, 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: #f8e7c3; }
.dropzone.over { background: #f5dca6; 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-text); }
.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: var(--warn-strong); border-color: var(--warn-strong); color: #fff; }
.btn.danger:hover { background: var(--warn); }
.contract-sub { margin: 14px 0 6px; font-size: 13px; color: var(--brand-text); 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-text); }
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-text); 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: var(--brand-ink); 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-text); 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: var(--brand-ink); 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: var(--brand-ink); }
.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: var(--warn-strong); animation: aipulse 1.5s infinite; }
@keyframes aipulse { 0% { box-shadow: 0 0 0 0 rgba(217,45,32,.5); } 70% { box-shadow: 0 0 0 16px rgba(217,45,32,0); } 100% { box-shadow: 0 0 0 0 rgba(217,45,32,0); } }
/* ===== Sprich-mit-Falax: großer Drück-und-Sprich-Knopf ===== */
.ai-panel.voice .chatlog { flex: 1 1 auto; min-height: 80px; }
.ai-voice-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 12px; border-top: 1px solid var(--line); }
.ai-talk { width: 116px; height: 116px; border-radius: 50%; border: none; cursor: pointer; background: var(--brand); color: var(--brand-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 10px 28px rgba(224,168,63,.38); 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: var(--warn-strong); box-shadow: 0 0 0 0 rgba(217,45,32,.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-text); 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; }
/* Hier stand: .btn.danger.small { color: var(--warn); }
   Das setzte die Schriftfarbe auf Dunkelrot — auf dem pinken Hintergrund aus Zeile 146.
   Dunkelrot auf Pink ist praktisch unlesbar, und weil .btn.danger.small genauer ist als
   .btn.danger, gewann diese Zeile gegen das dort gesetzte color:#fff. Betroffen waren
   NUR die kleinen Knöpfe — deshalb ist es lange niemandem aufgefallen.
   Die Gestaltung der kleinen Knöpfe steht jetzt gesammelt am Ende dieser Datei. */
.kalk-resultbox { margin-top: 6px; }
.kalk-sum-head { font-weight: 700; margin-bottom: 6px; color: var(--brand-text); }
.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: var(--brand-ink); 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: var(--warn-strong); }
.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-text); }
.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-text); }
.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: var(--warn-strong); }
.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-text); 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: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  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: var(--brand-ink); 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: var(--brand-ink); 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-text); }
.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; }
/* Farbige Symbole (seit v289): icon() zeichnet mit `stroke: var(--ico, <eigene Farbe>)`.
   Überall dort, wo die eigene Farbe NICHT passt, wird sie hier mit einer Zeile wieder auf
   die Textfarbe gestellt — statt an jeder Aufrufstelle im Code.
   Das betrifft alles mit farbigem oder dunklem Grund: ein orangefarbenes Symbol auf einem
   grünen Knopf wäre kaum zu erkennen. `.btn` OHNE `.secondary` ist der farbige Knopf;
   der helle sekundäre Knopf darf sein Symbol behalten. */
.btn:not(.secondary) .ico,
nav.side .ico,
.topbar .ico,
.ico-erbt .ico,
.ico-erbt { --ico: currentColor; }
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: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) { 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-text); border: 1px dashed var(--brand); font-weight: 700; }
.btn.add-task:hover { background: var(--brand); color: var(--brand-ink); }
.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(15, 23, 42, .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-text); 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-text); }
.acc-sec .link { margin-left: auto; font-weight: 600; }

/* Toast-Benachrichtigungen */
/* Rückfrage im eigenen Fenster (frage/hinweis) — mittig, ruhig, mit der Schrift der App.
   Ersetzt die Browser-Meldung „Auf falax-app.com wird Folgendes angezeigt:", die oben
   klebt, nach Fehler aussieht und fremde Knopfbeschriftungen trägt. */
.frage-modal { max-width: 440px; }
.frage-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.frage-kopf h2 { font-size: 19px; }
.frage-text { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 18px; word-break: break-word; }
.frage-text div + div { margin-top: 7px; }
.frage-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* „Rückgängig"-Balken: erscheint UNTEN MITTIG, nicht in der Toast-Spalte rechts —
   er ist eine laufende Frist, keine Randnotiz, und muss ins Auge fallen. */
.rueckruf { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 10000; display: flex; align-items: center; gap: 13px;
  background: #1f2a24; color: #fff; border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.32); max-width: min(560px, calc(100vw - 24px));
  animation: rueckrufAuf .18s ease; --ico: #fff; }
@keyframes rueckrufAuf { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rueckruf-text { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.rueckruf-zeit { font-size: 12.5px; opacity: .72; margin-top: 2px; }
.rueckruf .btn { flex: 0 0 auto; background: #fff; color: #1f2a24; border: none; --ico: #1f2a24; }
.rueckruf .btn:hover { background: #e7ece8; }
@media (max-width: 560px) {
  .rueckruf { left: 8px; right: 8px; bottom: 12px; transform: none; max-width: none; animation: none; }
}

/* Knopf „Anfragen" in der Kopfzeile — mit Zahl, sobald etwas offen ist.
   Bewusst MIT Wort (nicht nur Symbol): Ein Lead ist nichts, was man suchen soll. */
.topbar-anfragen { display: inline-flex; align-items: center; gap: 7px; position: relative; --ico: currentColor; }
.topbar-anfragen .anfr-wort { font-size: 13.5px; font-weight: 600; }
.topbar-anfragen.hat-neue { background: #2f9e5f; border-color: #2f9e5f; color: #fff; }
.anfr-zahl { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #e0455e; color: #fff;
  font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* MUSS sein: `display: inline-flex` in der Zeile darüber schlägt das eingebaute
   display:none von [hidden]. Ohne diese Regel steht die rote Blase mit einer „0" da,
   auch wenn gar keine Anfrage offen ist — genau so ist es aufgefallen. */
.anfr-zahl[hidden] { display: none !important; }
@media (max-width: 900px) { .topbar-anfragen .anfr-wort { display: none; } }

.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: var(--brand-ink); 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-text); 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-text); 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-text); 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-text); 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-text); 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-text); 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-text); }
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-text); }
.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-text); }
.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(15, 23, 42, .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-text); 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-text); }
.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: var(--brand-ink); font-weight: 700; font-size: 12.5px; cursor: pointer; box-shadow: 0 3px 10px rgba(224,168,63,.28); }
.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-text); font-weight: 700; }
.mail-navitem.active .ico { color: var(--brand-text); }
.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: var(--brand-ink); 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-text); 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-text); }
.mail-cat-badge { background: var(--brand); color: var(--brand-ink); 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-text); 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-text); 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: #2a2416; color: #f2c46b; }
html.dark .mail-navitem.active .ico { color: #f2c46b; }
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: #2a2416; color: #f2c46b; }
html.dark .mail-row2:hover { background: #1d2a38; }
html.dark .mail-row2.sel { background: #222c40; box-shadow: inset 3px 0 0 #e0a83f; }
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: #2a2416; }
.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-text); font-weight: 700; }
nav.side button.nav-subitem .ico { opacity: .55; }
nav.side button.nav-add { color: var(--brand-text); 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-text); 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-text); }

/* ===== 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: #1f2a40; }
.home-banner-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 30px 36px; background: linear-gradient(120deg, #0e1422 0%, #1f2a40 55%, #3a4a6b 120%); }
.home-banner.has-img .home-banner-fallback { display: none; }
.hb-kicker { color: #f2c46b; 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: #d6dce8; 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-text); 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-text); }
.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-text); 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-text); }
.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-text); }
.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-text); 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-text); 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: var(--warn-strong); }
/* 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-text); }
.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: var(--warn-strong); }
.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-text); }
.acc-bilanz .bilanz-check.warn { color: #b26a00; }
.cat-sum { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand-text); 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: var(--warn-strong); }
.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: var(--brand-ink); 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-text); flex: 0 0 auto; margin-top: 1px; }
.sup-tag-lbl { font-weight: 700; color: var(--brand-text); }
.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-text); margin-bottom: 4px; }
.acc-sortrow { font-size: 13.5px; padding: 3px 0; color: var(--ink); }
.acc-sortrow.ok { color: var(--brand-text); }
.acc-sortrow.warn { color: #b26a00; }
.acc-sortrow.err { color: var(--warn-strong); }
/* „abgebucht"-Markierung auf Beleg-Kacheln */
.beleg-matched { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--brand-text); 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-text); }
.konto-dir.ausgang { background: #fde7ea; color: var(--warn-strong); }
.konto-ok { color: var(--brand-text); font-weight: 600; font-size: 13px; }
.konto-no { color: var(--warn-strong); 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-text); }
/* Beleg zum Ansehen: Zeile = Auswahlknopf + Auge daneben, der Link in der Tabelle unterstrichen. */
.zuord-reihe { display: flex; align-items: stretch; gap: 6px; }
.zuord-reihe .zuord-item { flex: 1 1 auto; min-width: 0; }
.zuord-auge { flex: 0 0 auto; width: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; }
.zuord-auge:hover { border-color: var(--brand); background: var(--bg); }
.konto-beleg-link { text-decoration: underline dotted; text-underline-offset: 3px; }
.konto-beleg-link:hover { color: var(--brand-text); }
.konto-unmatched { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.konto-unmatched strong { color: var(--warn-strong); 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: var(--brand-ink); 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-text); 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-text); 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-text); 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(15, 23, 42, …)); 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-text); }
.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-text); }
.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-text); }

/* 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: var(--brand-ink); 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: #f3f4f7;           /* kühles Hellgrau passend zum Logo (v461; vorher Creme #f4f3ee) */
  --card: #ffffff;
  --ink: #18202f;
  --muted: #6b7486;
  --line: #e5e8ef;
  --sidebar: #182234;          /* Nachtblau wie der Logo-Hintergrund */
  --sidebar-ink: #d6dce8;
  --sidebar-muted: #8a96ad;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .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: var(--brand-ink); box-shadow: 0 8px 18px rgba(224,168,63,.22); }
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: var(--brand-ink); 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: #1f2a40; --topbar-ink: #eef1f7; --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: var(--warn-strong); }

/* ===== 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-text); }
.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-text); }
.media-drop .ico { color: var(--brand-text); 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-text); 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-text); }
.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-text); font-weight: 700; }
.calc-nav-btn.active .ico { color: var(--brand-text); }
.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-text); 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-text); 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-text); 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-text); 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-text) !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, .ki-schicht { 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, .ki-schicht::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), .ki-schicht > *:not(.ki-matrix):not(.ki-world) { position:relative; z-index:1; }
.assistant-page.ki-fx h2, .ki-schicht h2 { color:#aee9ff; }
.assistant-page.ki-fx .jv-name, .ki-schicht .jv-name { color:#7fb6e6; }
.assistant-page.ki-fx .assistant-log, .ki-schicht .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, .ki-schicht .assistant-empty p { color:#bcd6f5; }
.assistant-page.ki-fx .chatmsg.assistant, .ki-schicht .chatmsg.assistant { background:rgba(20,40,75,.88); color:#e6f1ff; }
.assistant-page.ki-fx .chatmsg.user, .ki-schicht .chatmsg.user { background:rgba(31,42,64,.92); color:#fff; }
.assistant-page.ki-fx .assistant-eg, .ki-schicht .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, .ki-schicht .assistant-eg:hover { border-color:#36c6ff; color:#fff; }
.assistant-page.ki-fx input[type=text], .ki-schicht 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, .ki-schicht input[type=text]::placeholder { color:#7d9dc4; }
.assistant-page.ki-fx .ai-voice-status, .ki-schicht .ai-voice-status { color:#9fc2ec; }
.assistant-page.ki-fx label.check, .assistant-page.ki-fx .ai-talk-label, .ki-schicht label.check, .ki-schicht .ai-talk-label { color:#dbeafc; }
.assistant-page.ki-fx .btn:not(.ai-talk), .ki-schicht .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, .ki-schicht .btn:not(.ai-talk):hover { border-color:#36c6ff; }
.assistant-page.ki-fx .ai-talk, .ki-schicht .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, .ki-schicht .ai-talk.listening { background:linear-gradient(160deg, #ff5c8a 0%, var(--warn-strong) 100%); box-shadow:0 0 26px rgba(217,45,32,.6); }
/* Sprach-zentriert: eine Sprechzeile statt Chat-Verlauf + „denkt nach"-Animation */
.assistant-page.ki-fx.voice-first, .ki-schicht.voice-first { display:flex; flex-direction:column; align-items:center; text-align:center; }
.assistant-page.ki-fx.voice-first h2, .ki-schicht.voice-first h2 { align-self:center; }
/* Reine Sprach-Seite: nur Jarvis + Statuszeile, zentriert */
.assistant-page.ki-fx.voice-only, .ki-schicht.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, .ki-schicht .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, .ki-schicht .ki-microw { margin-top:18px; justify-content:center; }
.assistant-page.ki-fx .ki-mic-btn, .ki-schicht .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), .ki-schicht .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, .ki-schicht .ki-mic-btn.on { background:linear-gradient(160deg,#ff5c8a 0%,var(--warn-strong) 100%) !important; border-color:#ff5c8a !important; color:#fff !important; box-shadow:0 0 22px rgba(217,45,32,.5); }
.assistant-page.ki-fx .ki-mic-hint, .ki-schicht .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, .ki-schicht .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, .ki-schicht .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, .ki-schicht .ki-cards:not(:empty) ~ .jarvis-avatar { margin:0 0 8px; }
.assistant-page.ki-fx .ki-cards:not(:empty) ~ .jarvis-avatar .jv-svg, .ki-schicht .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, .ki-schicht .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, .ki-schicht .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, .ki-schicht .ki-card-title { font-weight:700; color:#aee9ff; font-size:15px; }
.assistant-page.ki-fx .ki-card-x, .ki-schicht .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, .ki-schicht .ki-card-x:hover { color:#fff; background:rgba(217,45,32,.45); }
.assistant-page.ki-fx .ki-card-body, .ki-schicht .ki-card-body { padding:4px 14px 10px; }
.assistant-page.ki-fx .ki-card-row, .ki-schicht .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, .ki-schicht .ki-card-row:last-child { border-bottom:none; }
.assistant-page.ki-fx .ki-card-main, .ki-schicht .ki-card-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.assistant-page.ki-fx .ki-card-primary, .ki-schicht .ki-card-primary { color:#eaf4ff; font-weight:600; font-size:14.5px; word-break:break-word; }
.assistant-page.ki-fx .ki-card-secondary, .ki-schicht .ki-card-secondary { color:#9fc2ec; font-size:12.5px; word-break:break-word; }
.assistant-page.ki-fx .ki-card-text, .ki-schicht .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, .ki-schicht .ki-card-meta { color:#7fb6e6; font-size:12px; white-space:nowrap; flex:none; padding-top:1px; }
.assistant-page.ki-fx .ki-card-empty, .ki-schicht .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, .ki-schicht .ki-card-filebody { padding:0; position:relative; }
.assistant-page.ki-fx .ki-file-frame, .ki-schicht .ki-file-frame { width:100%; height:46vh; border:0; background:#fff; display:block; }
.assistant-page.ki-fx .ki-file-img, .ki-schicht .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, .ki-schicht .ki-file-actions { display:flex; gap:1px; background:rgba(120,180,255,.18); }
.assistant-page.ki-fx .ki-file-btn, .ki-schicht .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, .ki-schicht .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"], .ki-schicht .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, .ki-schicht .ki-card[data-kind="file"]::before, .ki-schicht .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, .ki-schicht .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, .ki-schicht .ki-card[data-kind="file"]::after { bottom:5px; right:5px; border-left:0; border-top:0; }
.assistant-page.ki-fx .ki-card-filebody::after, .ki-schicht .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, .ki-schicht .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, .ki-schicht .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, .ki-schicht .ki-globe-canvas { display:block; margin:0 auto; max-width:100%; }
.assistant-page.ki-fx .ki-map-label, .ki-schicht .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, .ki-schicht.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, .ki-schicht .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, .ki-schicht .ki-reading.show { max-height:340px; opacity:1; margin:14px auto 0; }
.assistant-page.ki-fx .ki-reading > div, .ki-schicht .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, .ki-schicht .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, .ki-schicht .ki-reading-wave { animation:jvPulse 1.1s ease-in-out infinite; }
.assistant-page.ki-fx .ki-reading-t, .ki-schicht .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, .ki-schicht .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, .ki-schicht .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, .ki-schicht .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%, #f8f1e2 0%, #f3f4f7 48%, #e6e9f0 100%);  /* v461: Gold-Schimmer statt Grün */
  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(15, 23, 42, .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-text); font-weight: 600; margin-top: 5px; text-transform: capitalize; }
.ds-date .ico { color: var(--brand-text); }
.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-text); }
.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-text); 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-text); 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: var(--brand-ink); }
.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-text); }
.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-text); 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-text); }
.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: var(--navy, #1f2a40); 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: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  #composeRoot .compose-griff { display: none; }
  #composeRoot .compose-win-head { cursor: pointer; }
}
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  #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(15, 23, 42, .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(15, 23, 42, .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(15, 23, 42, .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: var(--brand-text); 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: var(--brand-ink); 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(15, 23, 42, .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-text); 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-text); 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-text); 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 {
  /* Falax-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 Falax-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 Falax-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 Falax-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(15, 23, 42, .06); }
.wb-tab { color: var(--muted); }
.wb-tab.on { color: var(--brand-text); }
.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-text); }
.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-text); }
.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-text); 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-text); 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-text); 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-text); }
.audit-area-chip { display: inline-block; padding: 2px 9px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-text); 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-text); 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-text); 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-text); 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-text); }
.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-text); }
.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,
body.wand-offen .scan-fab,
body.wand-offen .ai-fab,
body.wand-offen .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: var(--brand-ink); 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;
  /* Letzte Spalte 34 -> 82 px: dort stehen jetzt DREI Knoepfe (hoch, runter, loeschen). */
  grid-template-columns: 26px minmax(180px, 1fr) 74px 92px minmax(120px, 160px) 88px 96px minmax(96px, 118px) 82px;
  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: #2f6df6; }
.sev-loesch-weg:hover { color: #e0455e; }
.sev-loesch:disabled { opacity: .28; cursor: default; }
.sev-loesch:disabled:hover { color: #9aa3b2; }
/* Pfeile und Papierkorb liegen zusammen in der letzten Rasterzelle — dort sitzen die
   Handgriffe an der GANZEN Position, nicht an einzelnen Feldern. */
/* Die Knöpfe bekommen einen sichtbaren Rahmen. Als reine graue Symbole ohne Umriss wurden
   sie für Zierrat gehalten und gar nicht erst angeklickt. */
.sev-posaktionen { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.sev-posbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid #dfe3ea; border-radius: 7px; background: #fff;
  color: #6b7280; cursor: pointer;
}
.sev-posbtn:hover { border-color: #2f6df6; color: #2f6df6; background: #f2f7ff; }
.sev-posbtn.sev-loesch-weg:hover { border-color: #e0455e; color: #e0455e; background: #fff4f5; }
.sev-posbtn:disabled { opacity: .3; cursor: default; }
.sev-posbtn:disabled:hover { border-color: #dfe3ea; color: #6b7280; background: #fff; }

/* ---- Positionen mit der Maus verschieben -----------------------------------------
   Am Zeiger-Gerät (Maus) wird gezogen; die Pfeilknöpfe verschwinden dort, weil sie dann
   nur Platz kosten. Auf Fingergeräten bleiben die Pfeile: Ziehen trifft man am Telefon in
   einer mitwachsenden Liste nicht, und links/rechts wischen ist dort schon belegt. */
@media (pointer: fine) {
  .sev-posaktionen .sev-posbtn:not(.sev-loesch-weg) { display: none; }
  /* Die Nummer ist der Ziehgriff — deshalb sieht sie auch danach aus. */
  .sev-poszeile > .p-nr { cursor: grab; user-select: none; border-radius: 6px; padding: 4px 2px; }
  .sev-poszeile > .p-nr:hover { background: #eef2f7; color: #2f6df6; }
  .sev-pos.zieht { opacity: .45; }
  .sev-pos.zieht .p-nr { cursor: grabbing; }
  /* Wohin es fällt: eine kräftige Linie ober- oder unterhalb der Zielzeile. */
  .sev-pos.ziel-vor { box-shadow: inset 0 3px 0 0 #2f6df6; }
  .sev-pos.ziel-nach { box-shadow: inset 0 -3px 0 0 #2f6df6; }
}
/* Kurz hervorheben, wohin die Position gewandert ist — sonst sucht man sie nach dem Klick. */
.sev-pos-bewegt { animation: posBewegt .9s ease; }
@keyframes posBewegt { from { background: #e8f2ff; } to { background: transparent; } }

/* 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-text); 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 {
    /* Letzte Spalte 26 -> 74 px, siehe oben. */
    grid-template-columns: 20px 1fr 1fr 1fr 74px;
    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. */
/* „backwards" statt „both" (16.10.2026): Nach dem Ende darf nichts stehen bleiben — eine weiter wirkende Bewegung
   macht das Element zum Bezugsrahmen für position: fixed (Mail-Leiste klebte am Ende der Mail) und zu einer eigenen
   Ebene (Menüs wurden von der nächsten Karte überdeckt). */
body.seitenwechsel main.content {
  animation: seiteRein 190ms cubic-bezier(0.22, 0.9, 0.3, 1) backwards;
}
/* 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) backwards; }
body.seitenwechsel main.content > .card:nth-child(2) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 35ms backwards; }
body.seitenwechsel main.content > .card:nth-child(3) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 70ms backwards; }
body.seitenwechsel main.content > .card:nth-child(4) { animation: kartenRein 200ms cubic-bezier(0.22, 0.9, 0.3, 1) 100ms backwards; }
/* Mit der Animation (Füllmodus „both") bleibt an jeder Karte ein transform stehen — jede Karte wird damit
   eine eigene Ebene, und die NÄCHSTE Karte malt über ein aufgeklapptes Menü („Weitere", „ZIP") hinweg
   (gemeldet 16.10.2026 in der Buchhaltung). Die Karte mit dem offenen Menü kommt deshalb nach vorn. */
main.content .card:has(details[open] > .buch-weitere-menue) { position: relative; z-index: 60; }

/* 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), #f5d27f);
  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); box-shadow: inset 3px 0 0 var(--brand); }  /* v461: Goldstreifen wie im Logo statt grünem Schein */
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: var(--brand-ink); }
.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: var(--brand-ink); 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. */
  /* v492: !important — eine spätere Handy-Regel setzte sonst wieder 8 px Seitenpolster. */
  main.content:has(.kalk-huelle) { padding: 0 !important; }
  .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-text);
  border-radius: 7px; font-size: 11.5px; font-weight: 600; padding: 2px 7px; cursor: pointer; }
.zuord-zahlung:hover { background: var(--brand); color: var(--brand-ink); }
.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); }

/* ---- KI-Start über dem leeren Schreibfeld ----
   Den KI-Helfer gab es schon, aber als letzten von zwölf Knöpfen in der Leiste — und
   beim Öffnen schaut man in ein leeres weißes Feld, nicht in die Werkzeugleiste.
   Deshalb steht der Anfang jetzt dort, wo der Blick hingeht. Er verschwindet, sobald
   das Feld nicht mehr leer ist. */
.schr-anfang {
  border: 1px solid var(--line); border-top: 0;
  padding: 15px 20px 16px;
  background: var(--bg);
}
.schr-anfang-kopf { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 12px; }
.schr-anfang-kopf .ico { flex: 0 0 auto; margin-top: 1px; --ico: var(--brand-dark); }
.schr-anfang-kopf > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schr-anfang-kopf strong { font-size: 14.5px; }
.schr-anfang-kopf span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.schr-vorlagen { display: flex; flex-wrap: wrap; gap: 8px; }
.schr-vorlage {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; --ico: var(--muted);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.schr-vorlage:hover {
  border-color: var(--brand); background: var(--brand-soft);
  --ico: var(--brand-dark); box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}
/* Das Feld schließt jetzt unten an den Startbereich an, nicht an die Leiste. */
.schr-anfang:not([hidden]) + .schr-feld { border-top: 0; }

/* ---- Unterschrift von Hand ---- */
.schr-sigblock {
  margin: 4px 0 0; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
}
.schr-sigzeile { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
/* .btn setzt display — das gewinnt gegen das hidden-Attribut aus dem Browser.
   Dieselbe Falle wie im Beleg-Editor (v223): Der Knopf "Entfernen" stand da, obwohl
   noch gar nichts unterschrieben war. */
.schr-sigblock [hidden] { display: none !important; }
/* Die Vorschau zeigt die Unterschrift so, wie sie im PDF über der Linie steht —
   mit Linie darunter, damit man den Sitz beurteilen kann, bevor das PDF entsteht. */
.schr-sigvorschau {
  max-width: 260px; padding: 6px 8px 0;
  border-bottom: 1px solid #8a92a6; margin-bottom: 12px; background: #fff;
  border-radius: 6px 6px 0 0;
}
.schr-sigvorschau img { display: block; max-width: 100%; height: 46px; object-fit: contain; }

@media (max-width: 560px) {
  .schr-anfang { padding: 13px 14px 14px; }
  .schr-vorlage { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 10px 8px; font-size: 12.5px; }
}
.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-text); }
.kunden-table th.kt-sort.aktiv { color: var(--brand-text); }
.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-text); }
@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-text);
  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));
  }
}

/* ===== Konstellations-Hintergrund (public/hintergrund.js) =====================
   Eigenes Design des Nutzers, gilt in der GANZEN App — auf dem PC wie am Handy.
   Die Fläche bleibt die ALTE, cremefarbene; der Canvas ist durchsichtig und zeichnet
   nur die grünen Linien und Punkte darauf. Die KARTEN bleiben weiß.

   Warum body die Farbe trägt und .layout/main.content NICHT: Der Canvas ist ein Kind
   von body und liegt damit ÜBER dessen Fläche — aber unter allem, was in #appView
   steckt. Behielte .layout seine Farbe, läge sie über dem Canvas und man sähe nichts. */
html, body { background: var(--canvas); }
#falaxHintergrund {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
}
/* Alles Sichtbare liegt ÜBER dem Canvas. */
#appView, #loginView, #modalRoot, #callRoot { position: relative; z-index: 1; }
/* Diese beiden trugen bisher die cremefarbene Fläche — jetzt tut es body allein,
   damit die Linien dazwischen zu sehen sind. */
.layout, main.content { background: transparent; }

/* ---- Private Kontakte: die Art als Marke -------------------------------
   Sie ist das Ordnungsmerkmal der Seite (Arzt, Bank, Behörde …) und muss beim
   Überfliegen sofort ins Auge fallen — deshalb eine Marke und keine weitere
   graue Textzeile zwischen Telefon und E-Mail. */
.pk-art {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 20px;
  background: var(--brand-soft, #eaf1ec); color: var(--brand-dark, #2f5741);
  border: 1px solid var(--line);
}
.sup-card .sup-line a { text-decoration: none; }
.sup-card .sup-line a:hover { text-decoration: underline; }

/* ---- Unternehmen löschen: erst zeigen, was verschwindet -----------------
   Der Warnkasten ist bewusst kräftig: Das ist der einzige Vorgang in der App,
   für den es keinen Papierkorb gibt. */
.warnbox {
  background: #fdf3f2; border: 1px solid #f0c9c4; border-left: 4px solid #c0392b;
  border-radius: 10px; padding: 11px 13px; color: #7d2820; font-size: 13.5px; line-height: 1.5;
}
.warnbox strong { display: block; margin-bottom: 3px; }
.loesch-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.loesch-tab td { padding: 4px 2px; border-bottom: 1px solid var(--line); }
.loesch-tab tr:last-child td { border-bottom: none; }

/* ===== Notiz am Dokument (lib/doknotiz.js, notizZeile/notizKnopf in app.js) =====
   Die Notiz steht UNTER dem Dateinamen und ist selbst anklickbar — am Handy trifft man
   den kleinen 📝-Knopf sonst schlecht. Bewusst dezent: Sie soll den Dateinamen nicht
   überstrahlen, aber auf einen Blick lesbar sein. */
.doc-notiz {
  display: flex; align-items: flex-start; gap: 5px;
  margin: 4px 0 2px; padding: 5px 7px;
  background: #fffbe9; border-left: 3px solid #e3b341; border-radius: 0 5px 5px 0;
  font-size: 12.5px; line-height: 1.35; color: #5a4a12; cursor: pointer;
  white-space: pre-wrap; word-break: break-word;
}
.doc-notiz:hover { background: #fff6d6; }
.doc-notiz-ic { flex: 0 0 auto; font-size: 11px; opacity: .8; }
.doc-notiz-txt { flex: 1 1 auto; min-width: 0; }
/* In der Kachel- und Nebeneinander-Ansicht darf eine lange Notiz die Karte nicht
   auseinanderziehen — dort auf drei Zeilen begrenzt, vollständig steht sie im Fenster. */
.firm-doc .doc-notiz-txt, .firm-doccol .doc-notiz-txt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Der Knopf zeigt an, ob schon etwas notiert ist — sonst müsste man jedes Dokument
   einzeln aufmachen, um das herauszufinden. */
.doc-mini.hat-notiz { background: #fff3cd; box-shadow: inset 0 -2px 0 #e3b341; }
/* In der ZEILEN-Darstellung ist `.firm-docrow` ein Flex-Container: Die Notiz als drittes
   Kind quetscht sonst den Dateinamen weg — bei einer langen Notiz verschwand er ganz.
   Derselbe Fall wie bei der Empfängerzeile im Verfassen-Fenster (v200). Sie bricht
   deshalb in eine EIGENE Zeile um. */
.firm-docrow { flex-wrap: wrap; }
.firm-docrow .doc-notiz { flex: 1 0 100%; order: 9; margin: 2px 0 0; }

/* ===== Beleg-Wand: alle Belege eines Bereichs auf dem ganzen Bildschirm =====
   Der Knopf sitzt in der Überschrift des Bereichs, das Fenster füllt den Schirm.
   Absicht: Überblick. Deshalb KEINE Aktionsknöpfe an den Kacheln — nur Bild, Name und
   die Zweitzeile (Datum/Betrag). Wer etwas tun will, öffnet den Beleg. */
.wand-knopf {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.wand-knopf:hover { background: var(--bg); border-color: var(--brand); }
.wand-knopf-ic { font-size: 14px; line-height: 1; }

.wand-back { padding: 0; align-items: stretch; justify-content: stretch; }
.wand-fenster {
  background: var(--bg); width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.wand-kopf {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.wand-titel { margin: 0; font-size: 17px; }
.wand-anzahl { color: var(--muted); font-size: 13.5px; }
.wand-tasten { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.wand-glabel { color: var(--muted); font-size: 12px; margin-right: 2px; }
.wand-gbtn {
  width: 32px; height: 30px; border: 1px solid var(--line); background: var(--card);
  border-radius: 8px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink);
}
.wand-gbtn.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Das Gitter füllt die Breite von selbst: so viele Belege je Zeile, wie bei der
   gewählten Größe hineinpassen. --wand-breite setzt der Größenschalter. */
.wand-gitter {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 4px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(var(--wand-breite, 250px), 1fr));
  align-content: start;
}
.wand-kachel { display: flex; flex-direction: column; min-width: 0; }
.wand-rahmen {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden; cursor: zoom-in; box-shadow: 0 2px 8px rgba(20, 30, 45, .07);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.wand-rahmen:hover { border-color: var(--brand); box-shadow: 0 8px 22px rgba(20, 30, 45, .16); transform: translateY(-2px); }
/* Feste Höhe je Kachel, damit die Zeilen fluchten — ein hochkant DIN A4 ist rund
   1,41-mal so hoch wie breit, ein Kassenbon viel schmaler. Ohne festes Maß wird die
   Wand ein Treppenmuster. */
.wand-rahmen .wand-bild {
  /* Seitenverhältnis statt fester Höhe: Die Spalten sind 1fr breit, also meist breiter als
     --wand-breite. Mit aspect-ratio fluchten die Zeilen trotzdem auf den Pixel. */
  display: block; width: 100%; aspect-ratio: 1 / 1.414; height: auto;
  object-fit: cover; object-position: top center; background: #fff;
}
.wand-rahmen .pdfvorschau { display: block; overflow: hidden; }
.wand-rahmen .pdfvorschau canvas { width: 100%; height: auto; display: block; }
/* Die Nummer steht in der Fußzeile, NICHT auf dem Beleg — als Aufkleber in der Ecke lag
   sie genau auf der Kopfzeile der Rechnung. */
.wand-nr {
  flex: 0 0 auto; min-width: 18px; text-align: center;
  background: var(--line); color: var(--muted); border-radius: 5px;
  padding: 0 5px; font-size: 11px; font-weight: 700;
}
.wand-fuss { padding: 6px 3px 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wand-zeile { display: flex; align-items: center; gap: 5px; min-width: 0; }
.wand-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wand-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wand-hinweis { flex: 0 0 auto; margin: 0; padding: 8px 16px 12px; color: var(--muted); font-size: 12px; }

@media (max-width: 560px) {
  /* Am Handy ist „alle nebeneinander" nur zu zweit sinnvoll — mehr ist nicht lesbar. */
  /* Am Handy IMMER genau ZWEI nebeneinander — ausdrücklicher Wunsch: „immer zwei, zwei,
     zwei, alles zum Runterscrollen". Drei sind auf dem Telefon nicht mehr zu erkennen,
     einer allein nimmt den Vergleich zwischen zwei Belegen weg. Der Größenschalter ist
     hier deshalb ausgeblendet — er könnte die Zahl nur wieder verstellen. */
  .wand-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 10px 10px 2px; }
  .wand-glabel, .wand-gbtn { display: none; }
  .wand-kopf { padding: 9px 11px; gap: 8px; }
  .wand-titel { font-size: 15.5px; flex: 1 0 100%; }
  .wand-tasten { margin-left: 0; }
  .wand-knopf-lbl { display: none; }
  .wand-hinweis { display: none; }
}

/* Der Betrag am Beleg — grün und halbfett. Beim Durchsehen von dreißig Belegen ist das
   die eine Zahl, auf die es ankommt; im grauen Kleingedruckten ging sie unter.
   #1f9d57 ist dasselbe Grün wie der positive Saldo in der Monatsbilanz. */
.beleg-preis { color: #1f9d57; font-weight: 700; }
.firm-doc-sub .beleg-preis, .firm-doccol-foot .beleg-preis { font-weight: 700; }
.wand-preis {
  color: #1f9d57; font-weight: 700; font-size: 13.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .1px;
}
@media (max-width: 560px) { .wand-preis { font-size: 13px; } }

/* Der Anzeigebereich des Betrachters. Er ist nur eine Hülle — damit der eingebettete
   Rahmen gegen die selbst gezeichneten Seiten getauscht werden kann, ohne den Betrachter
   neu aufzubauen (Kopfzeile, Blättern und Wischgesten bleiben erhalten). */
.docview-inhalt { display: block; min-width: 0; }

/* Kopfzeile über der Trefferliste der Postfach-Suche: wie viele Treffer und WO gesucht
   wurde. Ohne diese Zeile weiß man bei einem Treffer aus „Gesendet" nicht, warum die
   Liste plötzlich anders aussieht. */
.mail-suchkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; background: var(--brand-soft); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink);
}
.mail-suchmehr {
  margin-left: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.mail-suchmehr:hover { border-color: var(--brand); }
/* Woher der Treffer kommt — steht direkt an der Zeile. */
.mail-ordner-tag {
  flex: 0 0 auto; background: var(--line); color: var(--muted);
  border-radius: 5px; padding: 0 6px; font-size: 10.5px; font-weight: 700;
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}

/* ===========================================================================
   SYMBOL-KNÖPFE (14.09.2026)
   Kleine Knöpfe, die NUR ein Symbol enthalten — Löschen, Bearbeiten, Ansehen …

   VORHER: Jeder Löschen-Knopf war ein voller pinker Block (var(--warn-strong)) mit
   dunkelrotem Symbol darauf. Zwei Probleme auf einmal:
     • Das Symbol war auf dem Pink kaum zu erkennen (siehe Zeile 286).
     • Drei solche Blöcke nebeneinander auf einer Karte schreien den Nutzer an.
       Bei einem Knopf, der etwas LÖSCHT, ist Aufmerksamkeit richtig — aber als
       Dauerzustand in jeder Zeile stumpft sie ab und sieht unruhig aus.

   JETZT: ruhig im Normalzustand, deutlich beim Darüberfahren. So macht es jede
   gut gebaute Oberfläche — die Absicht zeigt sich, wenn der Nutzer hingeht.
   Die Gefahr-Farbe bleibt am Symbol auch im Ruhezustand sichtbar, damit man am
   Handy (wo es kein Darüberfahren gibt) trotzdem sofort sieht, was löscht.

   :has(> .ico:only-child) trifft genau die Knöpfe, in denen nichts als ein
   Symbol steht. Knöpfe MIT Text bleiben unberührt — die brauchen ihre Fläche.
   =========================================================================== */
.btn.small:has(> .ico:only-child) {
  /* ACHTUNG — hier stand zuerst width/height 32px und padding 0. Das war falsch:
     In CSS zaehlt :only-child NUR Element-Kinder. Ein Knopf wie
        el('button', {}, icon('undo'), ' Zurueckholen')
     enthaelt das Symbol als Element und den Text als reinen Textknoten — das
     Symbol ist dort also sehr wohl :only-child. Die feste Groesse hat solche
     Knoepfe zusammengequetscht, der Text lief heraus und ueberlappte alles
     daneben (Papierkorb-Seite, 14.09.2026).
     Deshalb jetzt min-width/min-height statt fester Masse und das normale
     Innenpolster: Ein reines Symbol wird dadurch quadratisch, ein Knopf mit
     Text behaelt seine Breite. gap trennt Symbol und Text sauber. */
  min-width: 32px;
  min-height: 32px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 9px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.small:has(> .ico:only-child):hover {
  background: var(--brand-soft);
  border-color: #bfe0cc;
  color: var(--brand-text);
}
.btn.small:has(> .ico:only-child):active { transform: translateY(1px); }

/* Gefahr: Symbol schon im Ruhezustand rot (fürs Handy), aber ohne Farbblock. */
.btn.danger.small:has(> .ico:only-child) {
  background: transparent;
  border-color: var(--line);
  color: var(--warn);
}
.btn.danger.small:has(> .ico:only-child):hover {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn);
}

/* Tastaturbedienung sichtbar machen — vorher gab es gar keine Fokus-Anzeige. */
.btn.small:has(> .ico:only-child):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Knöpfe MIT Text in der Gefahr-Farbe: weiße Schrift, wie bei den großen auch.
   Ohne diese Zeile erbten sie weiter das Dunkelrot auf Pink. */
.btn.danger.small:not(:has(> .ico:only-child)) { color: #fff; }

/* Am Handy etwas größer — 32 px sind mit dem Finger knapp; 38 px trifft man sicher. */
@media (pointer: coarse) {
  .btn.small:has(> .ico:only-child) { min-width: 38px; min-height: 38px; border-radius: 10px; }
}

/* ===========================================================================
   DARSTELLUNGS-UMSCHALTER — klein und oben (14.09.2026)
   Wunsch: „das bei allen Seiten und ganz klein und oben liegend nebeneinander"

   Vorher stand der Umschalter als eigenes Feld MIT Beschriftung „Darstellung"
   untereinander in der Filterleiste und nahm dort eine ganze Zeile ein.
   Jetzt sitzt er als kompakte Pillenleiste rechts oben in der Kopfzeile.
   =========================================================================== */
.ansicht-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.docview-switch.kompakt {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
}
.docview-switch.kompakt .docview-btn {
  border: 0; background: transparent; border-radius: 7px;
  padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.docview-switch.kompakt .docview-btn:hover { color: var(--ink); }
.docview-switch.kompakt .docview-btn.active { background: #fff; color: var(--brand-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .10); }
.docview-switch.kompakt .docview-ico { font-size: 13px; line-height: 1; }
/* Am Handy bleibt nur das Symbol — die Wörter passen dort nicht daneben. */
@media (max-width: 560px) { .docview-switch.kompakt .docview-lbl { display: none; } }

/* ---- Kartenraster als LISTE ------------------------------------------------
   Wunsch: „ich will das auch als Liste" (Lieferanten, Private Kontakte).
   Bewusst NUR über CSS gelöst: Die Zeichenfunktionen bleiben unangetastet, es
   kommt lediglich eine Klasse an den Rahmen. Ein Umbau des Aufbaus hätte an
   jeder dieser Seiten dieselbe Arbeit — und dieselben Fehlerquellen — bedeutet. */
.doc-grid.als-liste { display: block; }
.doc-grid.als-liste .sup-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 6px; min-height: 0;
}
.doc-grid.als-liste .sup-head { flex: 0 0 auto; margin: 0; min-width: 200px; }
.doc-grid.als-liste .sup-line { margin: 0; font-size: 13px; color: var(--muted); }
.doc-grid.als-liste .sup-actions { margin-left: auto; margin-top: 0; flex: 0 0 auto; }
/* Längere Zusatzangaben (Notizen, „Liefert:", IBAN) verstecken die Liste —
   dafür ist die Kachelansicht da. Sonst wäre die Zeile wieder eine Karte. */
.doc-grid.als-liste .sup-note,
.doc-grid.als-liste .sup-tag,
.doc-grid.als-liste .sup-extra { display: none; }
@media (max-width: 700px) {
  .doc-grid.als-liste .sup-card { gap: 8px; }
  .doc-grid.als-liste .sup-head { min-width: 140px; }
  .doc-grid.als-liste .sup-actions { margin-left: 0; width: 100%; }
}

/* ===========================================================================
   LEUCHTENDE MENÜ-SYMBOLE (15.09.2026)
   Wunsch: „die Symbole bei den Buttons bitte leuchten lassen, an und aus, immer"

   Drei Entscheidungen, die den Unterschied zwischen „lebendig" und „nervös" machen:

   1. LANGSAM. Ein voller Durchlauf dauert 4,2 Sekunden. Bei einer Sekunde wäre es
      ein Blinken, und ein blinkendes Menü liest man nach zehn Minuten nicht mehr —
      man weicht ihm aus.
   2. VERSETZT. Jede Kachel startet später als die davor (nth-child). Pulsieren alle
      gleichzeitig, zuckt die ganze Spalte wie ein Warnlicht. Versetzt entsteht ein
      ruhiges Wandern von oben nach unten.
   3. NUR DER SCHEIN, nicht das Symbol. Animiert wird box-shadow und die Deckkraft
      des Hintergrunds — NICHT die Farbe des Symbols selbst. Ein blasser werdendes
      Symbol wäre zeitweise schlechter lesbar; der Schein stört das Lesen nicht.

   box-shadow und opacity laufen auf der Grafikkarte — das kostet weder Rechenzeit
   noch spürbar Akku.

   Der AKTIVE Punkt leuchtet NICHT mit: Er hebt sich schon durch seinen Hintergrund
   ab. Würde er zusätzlich pulsieren, ginge genau die Auszeichnung verloren, auf die
   es ankommt — nämlich wo man gerade ist.
   =========================================================================== */
@keyframes navLeuchten {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.22); }
}

nav.side button:not(.active) .nav-chip {
  animation: navLeuchten 4.2s ease-in-out infinite;
}

/* Versetzter Einsatz — 0,28 s Abstand, danach wiederholt sich das Muster.
   Zehn Stufen reichen: Bei mehr Einträgen wirkt die Wiederholung nicht störend,
   weil die Spalte dann ohnehin gescrollt wird. */
nav.side button:nth-child(10n + 1) .nav-chip { animation-delay: 0s; }
nav.side button:nth-child(10n + 2) .nav-chip { animation-delay: .28s; }
nav.side button:nth-child(10n + 3) .nav-chip { animation-delay: .56s; }
nav.side button:nth-child(10n + 4) .nav-chip { animation-delay: .84s; }
nav.side button:nth-child(10n + 5) .nav-chip { animation-delay: 1.12s; }
nav.side button:nth-child(10n + 6) .nav-chip { animation-delay: 1.4s; }
nav.side button:nth-child(10n + 7) .nav-chip { animation-delay: 1.68s; }
nav.side button:nth-child(10n + 8) .nav-chip { animation-delay: 1.96s; }
nav.side button:nth-child(10n + 9) .nav-chip { animation-delay: 2.24s; }
nav.side button:nth-child(10n)     .nav-chip { animation-delay: 2.52s; }

/* Beim Darüberfahren hört das Leuchten auf: Dann ist die Aufmerksamkeit schon dort,
   und eine weiterlaufende Bewegung unter dem Zeiger wirkt unruhig. */
nav.side button:hover .nav-chip { animation: none; }

/* Wer Bewegung im System abgestellt hat, bekommt sie auch hier nicht. Das ist keine
   Feinheit: Für Menschen mit Migräne oder Gleichgewichtsstörungen ist dauerhafte
   Bewegung am Bildschirmrand ein echtes Problem. */
@media (prefers-reduced-motion: reduce) {
  nav.side button:not(.active) .nav-chip { animation: none; }
}

/* ---- Baustellen als Liste (Ausführung) + Baustellenspalte in der Zeiterfassung ---- */
/* Rollbare Tabellen: am Handy passen neun Spalten nicht nebeneinander. Ein weicher
   Verlauf am Rand zeigt, dass es seitwärts weitergeht — sonst übersieht man die Beträge.
   Die inneren Verläufe scrollen mit (background-attachment: local) und verschwinden
   deshalb von selbst, sobald man am Ende angekommen ist. */
.tabelle-rollbar {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left, var(--card) 40%, rgba(255,255,255,0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .12), rgba(0,0,0,0)) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .12), rgba(0,0,0,0)) right center / 10px 100% no-repeat scroll;
}
.projekt-liste { width: 100%; }
.projekt-liste td, .projekt-liste th { white-space: nowrap; }
.projekt-liste td:nth-child(6) { white-space: normal; max-width: 260px; }
.projekt-liste td:nth-child(7) { white-space: normal; max-width: 220px; }
.projekt-farbe {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 7px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12);
}
.zeit-baustelle {
  display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}


/* ==================== Projekte: Liste und Akte ====================
   Aufbau der Kachel: links das letzte Baustellenfoto, rechts eine klare Rangfolge —
   Name, Kunde, Ort, Termin, Zeitbalken, Geld, Zählmarken. Ein Bild sagt einem
   Bauunternehmer schneller, um welche Baustelle es geht, als jede Textzeile.
   Zahlen stehen in der Serifenschrift der App (--serif), wie überall sonst auch. */

.pj-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.pj-kopf h2 { display: inline-flex; align-items: center; gap: 9px; }

.pj-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 14px; }
.pj-filter { display: inline-flex; gap: 3px; background: var(--bg); border-radius: 11px; padding: 3px; flex-wrap: wrap; }
.pj-filterknopf {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s;
}
.pj-filterknopf:hover { color: var(--ink); }
.pj-filterknopf.aktiv { background: #fff; color: var(--brand-text); box-shadow: 0 1px 3px rgba(15, 23, 42, .11); }
.pj-zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 6px; border-radius: 10px; background: rgba(0,0,0,.06);
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.pj-filterknopf.aktiv .pj-zahl { background: var(--brand-soft); color: var(--brand-text); }
/* Das Suchfeld sah aus wie ein nacktes Browser-Eingabefeld: .pj-suche setzte nur die
   Breite, alles andere kam vom Browser (grauer Innenrahmen, eckig, andere Schrift).
   Jetzt liegt es in einem Kasten mit Lupe, im Stil der übrigen Felder. */
.pj-suchbox {
  flex: 1 1 220px; min-width: 180px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 38px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  transition: border-color .12s, box-shadow .12s;
  --ico: var(--muted);
}
.pj-suchbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.pj-suchbox .ico { flex: 0 0 auto; }
.pj-suche {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--ink);
}
/* Das Browser-eigene Kreuz im Suchfeld passt nicht zum Rest — es sitzt anders und
   sieht auf jedem System anders aus. */
.pj-suche::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---- Anhang oder Link ---- */
.th-wegwahl { display: flex; gap: 9px; flex-wrap: wrap; }
.th-wegknopf {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 13px; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
  transition: border-color .12s, background .12s;
}
.th-wegknopf:hover:not(:disabled) { border-color: var(--brand); }
.th-wegknopf.aktiv { border-color: var(--brand); background: var(--brand-soft); }
.th-wegknopf:disabled { opacity: .55; cursor: not-allowed; }
.th-wegtitel { font-size: 14px; font-weight: 600; color: var(--ink); }
.th-weghint { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.pj-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }

.pj-kachel {
  display: flex; align-items: stretch; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  cursor: pointer; text-align: left;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.pj-kachel:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d7ded6; }
.pj-kachel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Bild links: feste Breite, volle Höhe der Kachel */
.pj-bild { flex: 0 0 116px; position: relative; overflow: hidden; background: var(--bg); }
.pj-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne Foto: die Projektfarbe stark aufgehellt, das Kürzel in der Farbe selbst.
   Vollflächig kräftig war sie der lauteste Teil der Kachel, ohne etwas zu sagen.
   color-mix können nicht alle Browser — deshalb erst ein Fallback, dann die Feinfassung. */
.pj-bild-leer { display: flex; align-items: center; justify-content: center; background: var(--bg); }
.pj-bild-leer span {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--muted); letter-spacing: .02em;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .pj-bild-leer { background: color-mix(in srgb, var(--pjf, #667085) 13%, #fff); }
  .pj-bild-leer span { color: color-mix(in srgb, var(--pjf, #667085) 72%, #000); }
}

.pj-inhalt { flex: 1 1 auto; min-width: 0; padding: 15px 17px; display: flex; flex-direction: column; gap: 7px; }

.pj-titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pj-titel {
  margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1.22; color: var(--ink); text-wrap: balance;
}
.pj-ampel {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.pj-punkt { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

.pj-kunde { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ort { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-termin { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }

/* Zeitbalken */
.pj-zeit { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.pj-zeitbalken { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(0,0,0,.07); overflow: hidden; }
.pj-zeitfuell { height: 100%; background: var(--brand); border-radius: 3px; }
.pj-zeitfuell.verzug { background: var(--warn-strong); }
.pj-zeittext { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* Geld */
.pj-geld { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--line); }
.pj-geldpost { display: grid; gap: 0; }
.pj-geldpost strong { font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pj-geldwort { font-size: 11px; color: var(--muted); }
.pj-geldpost.offen strong { color: var(--warn); }

.pj-notiz {
  margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pj-minis { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pj-mini {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px;
  background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 600;
}
.pj-mini.warn { background: var(--warn-bg); color: var(--warn); }

/* ---- Die Akte ---- */
.pj-akte-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pj-akte-titel { flex: 1 1 auto; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; min-width: 0; }
.pj-akte-titel h2 { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.15; }
.pj-akte-fleck { width: 11px; height: 26px; border-radius: 4px; flex: 0 0 auto; }

.pj-stamm { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.pj-stamm > div, .pj-stammlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px;
  background: var(--bg); color: var(--muted); font-size: 12.5px; border: 0; font-family: inherit;
}
.pj-stammlink { cursor: pointer; text-decoration: none; transition: background .12s, color .12s; }
.pj-stammlink:hover { background: var(--brand-soft); color: var(--brand-text); }

/* Kennzahlen als eine Reihe — keine Kästen, nur Trennlinien */
.pj-kennzahlen {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card);
}
.pj-kennzahl {
  flex: 1 1 130px; min-width: 120px; padding: 14px 17px;
  border-left: 1px solid var(--line); display: grid; gap: 2px;
}
.pj-kennzahl:first-child { border-left: 0; }
.pj-kennzahl strong {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink);
}
.pj-kennzahl span { font-size: 11.5px; color: var(--muted); }
.pj-kennzahl.offen strong, .pj-kennzahl.verzug strong { color: var(--warn); }
.pj-kennzahl.verzug { background: var(--warn-bg); }

.pj-reiter { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 20px 0 0; }
.pj-reiterknopf {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 13px; cursor: pointer; transition: color .12s;
}
.pj-reiterknopf:hover { color: var(--ink); }
.pj-reiterknopf.aktiv { color: var(--brand-text); border-bottom-color: var(--brand); }
.pj-reiterinhalt { padding-top: 18px; }

.pj-ueberblick { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.pj-block { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px 17px; }
.pj-block h3 {
  margin: 0 0 11px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700;
}
.pj-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.pj-zeile strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--serif); font-size: 15px; }
.pj-zeile.rot strong { color: var(--warn); }
.pj-grau { color: var(--muted); }
.pj-rot { color: var(--warn); }

.pj-balken { height: 6px; border-radius: 3px; background: rgba(0,0,0,.07); overflow: hidden; margin-top: 11px; }
.pj-balkenfuell { height: 100%; background: var(--brand); border-radius: 3px; }

.pj-bewegung { display: flex; gap: 11px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.pj-bewegung:first-of-type { border-top: 0; }
.pj-wann { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pj-wer { color: var(--muted); font-size: 12px; margin-left: auto; }

/* Fotos — das erste groß, weil meistens eines alles sagt */
.pj-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 11px; }
.pj-foto {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--card); transition: box-shadow .15s, transform .15s;
}
.pj-foto:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.pj-foto.gross { grid-column: span 2; grid-row: span 2; }
.pj-fotoflaeche {
  display: block; flex: 1 1 auto; border: 0; padding: 0; background: none;
  cursor: pointer; font: inherit; min-height: 0;
}
.pj-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg); }
.pj-foto.gross img { aspect-ratio: 1 / 1; }
.pj-fotofuss { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 9px; min-width: 0; }
.pj-fotoname {
  flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-fotoweg {
  flex: 0 0 auto; border: 0; background: none; padding: 4px; border-radius: 6px;
  color: var(--muted); cursor: pointer; line-height: 0;
}
.pj-fotoweg:hover { background: var(--bg); color: var(--ink); }

/* Überschrift eines Reiter-Abschnitts mit Aktion rechts */
.pj-unterkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 22px 0 10px;
}
.pj-unterkopf:first-child { margin-top: 0; }
.pj-unterkopf h3 {
  margin: 0; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700;
}

/* Eine abgelegte Unterlage */
.pj-dateizeile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 9px 11px; border-radius: 10px; transition: background .12s;
}
.pj-dateizeile:hover { background: var(--bg); }
.pj-dateiname {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--brand-text); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pj-dateiname:hover { text-decoration: underline; }
.pj-dateifach { flex: 0 0 auto; font-size: 11px; color: var(--muted); }

/* ---- Einkauf ---- */
.pj-kopfknoepfe { display: inline-flex; gap: 7px; flex-wrap: wrap; }

.pj-einkauftabelle { width: 100%; }
.pj-einkauftabelle td, .pj-einkauftabelle th { white-space: nowrap; }
.pj-einkauftabelle td:first-child { white-space: normal; min-width: 170px; }
.pj-einkaufnotiz { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.pj-belegknopf {
  border: 0; background: var(--bg); border-radius: 7px; padding: 5px 7px;
  color: var(--brand-text); cursor: pointer; line-height: 0;
}
.pj-belegknopf:hover { background: var(--brand-soft); }

/* Der Summenblock steht rechts — wie auf einer Rechnung, wo man ihn sucht. */
.pj-einkaufsumme {
  margin: 14px 0 0 auto; max-width: 380px;
  background: var(--bg); border-radius: 12px; padding: 13px 16px;
}
.pj-einkaufsumme .pj-zeile { padding: 3px 0; }
.pj-einkaufsumme .pj-zeile.gruen strong { color: var(--brand-text); }
.pj-einkaufsumme .pj-zeile.gross strong { font-size: 18px; }
.pj-summentrenner { height: 1px; background: var(--line); margin: 7px 0; }

/* Mitlaufende Rechnung im Erfassen-Fenster — sonst rechnet man im Kopf nach. */
.pj-rechenzeile {
  display: flex; gap: 18px; flex-wrap: wrap;
  background: var(--brand-soft); border-radius: 9px; padding: 9px 13px; margin: 2px 0 12px;
  font-size: 13px; color: var(--muted);
}
.pj-rechenzeile strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Abschlagsabzug unter der Bruttosumme einer Schlussrechnung. Klein und grau: Die Zahl,
   die zaehlt, ist die Forderung darunter — die Blattsumme steht nur zur Einordnung da. */
.pj-abschlag {
  font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 2px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pj-abschlag strong { color: var(--ink); }

/* Die Offen-Spalte ist ein Knopf — dahinter stehen die einzelnen Zahlungen.
   Sie soll aber nicht wie ein Knopf aussehen, sondern wie die Zahl, die sie ist. */
.pj-offenknopf {
  border: 0; background: none; padding: 3px 5px; margin: -3px -5px; border-radius: 7px;
  font: inherit; cursor: pointer; text-align: right; line-height: inherit;
}
.pj-offenknopf:hover { background: var(--bg); }

.pj-zahlkopf { background: var(--bg); border-radius: 11px; padding: 12px 15px; margin-bottom: 12px; }
.pj-zahlkopf .pj-zeile { padding: 3px 0; }

.pj-zahlzeile {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
  font-size: 14px; transition: background .12s;
}
.pj-zahlzeile:hover { background: var(--bg); }
.pj-zahlzeile > strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.pj-zahlnotiz {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bezahlte Rechnung */
.pj-bezahlt { color: var(--ok); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* Belege */
.pj-art { font-size: 12px; color: var(--muted); }
.pj-herkunft { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.pj-herkunft.grau { background: var(--bg); color: var(--muted); }

/* Eingabezeilen */
.pj-eingabe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pj-notizeingabe { display: grid; gap: 9px; margin-bottom: 18px; }
.pj-notizeingabe textarea { width: 100%; }
.pj-notizeingabe .btn { justify-self: start; }

/* Material */
.pj-liste { display: grid; gap: 1px; }
.pj-materialzeile {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  cursor: pointer; font-size: 14px; transition: background .12s;
}
.pj-materialzeile:hover { background: var(--bg); }
.pj-materialzeile.erledigt .pj-materialtext { text-decoration: line-through; color: var(--muted); }
.pj-materialtext { flex: 1 1 auto; min-width: 0; }
.pj-frist { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pj-frist.spaet { color: var(--warn); font-weight: 600; }

/* Notizen */
.pj-notizkarte {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  background: var(--card); border-radius: 4px 12px 12px 4px; padding: 12px 15px; margin-bottom: 10px;
}
.pj-notizkopf { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 5px; }
.pj-notiztext { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.5; }

/* Verzögerungen */
.pj-verzugkarte {
  display: flex; align-items: flex-start; gap: 15px; padding: 13px 15px; margin-bottom: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px;
}
.pj-verzugtage { flex: 0 0 auto; display: grid; justify-items: center; color: var(--warn); line-height: 1.05; }
.pj-verzugtage strong { font-family: var(--serif); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pj-verzugtage span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pj-verzuginhalt { flex: 1 1 auto; min-width: 0; }
.pj-verzuggrund { margin: 0 0 4px; font-weight: 600; font-size: 14.5px; }

/* Verlauf */
.pj-alt { color: var(--muted); text-decoration: line-through; }

/* Zuordnen */
/* min-width: 0 ist hier KEINE Feinheit, sondern der Unterschied zwischen lesbar und kaputt:
   Ein Grid- oder Flex-Kind schrumpft von sich aus nicht unter die Breite seines Inhalts
   (min-width: auto). Ohne diese Zeile lief bei 375 px jede Zeile 84 px über den Rand hinaus
   und die Beträge waren abgeschnitten — nachgemessen, nicht geschätzt. */
.pj-zuordnen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 10px; }
.pj-zuordnenzeile {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px;
  background: rgba(255,255,255,.65); cursor: pointer; font-size: 13.5px; transition: background .12s;
  min-width: 0;
}
.pj-zuordnenzeile > input[type="checkbox"] { flex: 0 0 auto; }
.pj-zuordnenzeile > strong, .pj-zuordnenzeile > .link { flex: 0 0 auto; }
.pj-zuordnenzeile:hover { background: #fff; }
.pj-zuordnenzeile > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-zuordnenzeile strong { font-variant-numeric: tabular-nums; }

@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .pj-raster { grid-template-columns: 1fr; }
}

/* Am Handy wandert das Bild NACH OBEN.
   Beim Durchprüfen bei 375 px fiel auf: Mit dem Bild links bleiben dem Text nur rund
   200 px, und ein Baustellenname wie „Komplettsanierung Mehrfamilienhaus Blücherstraße
   112–118" bricht auf sechs Zeilen. Als flacher Streifen über der Kachel kostet das Bild
   nur einmal Höhe, und der Text bekommt die volle Breite. */
@media (max-width: 560px) {
  .pj-kachel { flex-direction: column; }
  .pj-bild { flex: 0 0 104px; width: 100%; }
  .pj-bild-leer { justify-content: flex-start; padding-left: 15px; }
  .pj-bild-leer span { font-size: 26px; }
  .pj-inhalt { padding: 13px 15px; }
  .pj-titel { font-size: 17px; }

  /* Die Ampel liegt am Handy OBEN AUF DEM BILD statt unter dem Titel. Dort kostete sie
     eine eigene Zeile, sobald der Titel umbrach — und der bricht auf einem Telefon fast
     immer um. Weißer Grund mit Schatten, damit sie auch auf einem hellen Foto lesbar bleibt. */
  .pj-kachel { position: relative; }
  .pj-titelzeile { display: block; }
  .pj-titelzeile .pj-ampel {
    position: absolute; top: 11px; right: 11px; z-index: 1;
    background: rgba(255, 255, 255, .93) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .16);
    backdrop-filter: blur(3px);
  }

  .pj-fotos { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
  .pj-foto.gross { grid-column: span 2; grid-row: span 1; }
  .pj-foto.gross img { aspect-ratio: 4 / 3; }

  /* Acht Reiter passen bei 375 px nicht nebeneinander — die Leiste rollt waagerecht.
     Damit niemand „E-Mails" und „Verlauf" übersieht, verrät ein weicher Verlauf am rechten
     Rand, dass es weitergeht. Er verschwindet, sobald man bis ans Ende gerollt hat
     (background-attachment: local auf dem inneren Verlauf — der scrollt mit). */
  .pj-reiter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--card) 40%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--card) 40%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .13), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .13), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
  }
  .pj-reiter::-webkit-scrollbar { display: none; }
  .pj-reiterknopf { font-size: 12.5px; padding: 9px 11px; white-space: nowrap; flex: 0 0 auto; }

  .pj-akte-titel h2 { font-size: 19px; }
  .pj-akte-fleck { height: 21px; width: 9px; }

  .pj-kennzahl { flex-basis: 50%; min-width: 0; padding: 11px 13px; }
  .pj-kennzahl strong { font-size: 19px; }
  .pj-kennzahl:nth-child(odd) { border-left: 0; }

  .pj-eingabe > input[type="text"] { flex: 1 1 100%; }
  .pj-verzugkarte { gap: 11px; padding: 11px 12px; }
  .pj-fotos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .pj-dateizeile { flex-wrap: wrap; }
  .pj-dateiname { flex: 1 1 100%; white-space: normal; }
  .pj-unterkopf { margin-top: 18px; }
  .pj-einkaufsumme { max-width: none; margin-left: 0; }
  .pj-rechenzeile { gap: 12px; justify-content: space-between; }
}

/* ==================== Themen ====================
   Jede Kachel bekommt ihre eigene Farbe und ihr Symbol — bei zwanzig Themen erkennt man
   „das Auto" am Fleck, nicht am Lesen. Die Farbe kommt als --thf an der Kachel an und wird
   überall daraus abgeleitet, damit ein Thema in Liste, Kopf und Symbolen gleich aussieht. */

.th-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }

.th-kachel {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  cursor: pointer; text-align: left;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.th-kachel:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d7ded6; }
.th-kachel:focus-visible { outline: 2px solid var(--thf, var(--brand)); outline-offset: 2px; }

/* Ohne Bild: eine ruhige Fläche in der Themenfarbe mit großem Symbol. */
.th-symbolflaeche {
  display: flex; align-items: center; justify-content: center;
  height: 96px; font-size: 40px; line-height: 1;
  background: var(--bg);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .th-symbolflaeche { background: color-mix(in srgb, var(--thf) 12%, #fff); }
}
/* Logo der Stelle über dem Ordnersymbol: weiße Kachel, damit auch Logos mit Transparenz
   auf der farbigen Fläche sauber stehen. Bleibt das Bild aus (204), entfernt es sich selbst. */
.th-symbolflaeche { position: relative; }
.th-logo {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px; object-fit: contain;
  background: #fff; border-radius: 14px; padding: 8px; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* Mit Bild: das Bild als Kopf, das Symbol als kleine Marke darauf. */
.th-bild { position: relative; height: 96px; overflow: hidden; background: var(--bg); }
.th-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-symbolklein {
  position: absolute; left: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}

.th-inhalt { flex: 1 1 auto; min-width: 0; padding: 13px 15px 14px; display: flex; flex-direction: column; gap: 7px; }
.th-titel {
  margin: 0; font-family: var(--serif); font-size: 16.5px; font-weight: 600;
  line-height: 1.25; color: var(--ink);
}
.th-kat {
  align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--bg); color: var(--muted); letter-spacing: .02em;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .th-kat { background: color-mix(in srgb, var(--thf, #667085) 12%, #fff); color: color-mix(in srgb, var(--thf, #667085) 78%, #000); }
}
.th-notiz {
  margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.th-kachel .pj-minis { margin-top: auto; padding-top: 4px; }

/* Leerer Zustand — eine Einladung, kein grauer Satz. */
.th-leer { text-align: center; padding: 42px 20px; max-width: 480px; margin: 0 auto; }
.th-leerzeichen { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.th-leer h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; }
.th-leer p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---- Das geöffnete Thema ---- */
.th-akte-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.th-akte-symbol {
  width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  background: var(--bg);
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .th-akte-symbol { background: color-mix(in srgb, var(--thf) 14%, #fff); }
}
.th-akte-titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.th-akte-titel h2 { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.15; }
.th-akte-notiz {
  margin: 0 0 6px; font-size: 14px; color: var(--muted); line-height: 1.6;
  white-space: pre-wrap; max-width: 70ch;
}

/* ---- Dateien ---- */
.th-dropzone {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 16px;
  text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 16px;
  transition: border-color .12s, background .12s;
}
.th-dropzone.ueber { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }

.th-dateien { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.th-datei {
  position: relative;
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--card); transition: box-shadow .15s, transform .15s;
}
.th-datei:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.th-dateiflaeche {
  position: relative; display: block; border: 0; padding: 0; background: var(--bg);
  cursor: pointer; font: inherit; height: 112px; overflow: hidden;
}
.th-dateiflaeche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-dateisymbol {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--thf, var(--muted));
}
@supports (background: color-mix(in srgb, red 10%, white)) {
  .th-dateiflaeche:has(.th-dateisymbol) { background: color-mix(in srgb, var(--thf, #667085) 9%, #fff); }
}
/* Die Art steht als kleine Marke auf der Fläche — man sieht auf einen Blick, was es ist. */
.th-dateiart {
  position: absolute; right: 7px; top: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.93); color: var(--muted);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.th-dateifuss { padding: 9px 11px 4px; min-width: 0; }
.th-dateiname {
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.th-dateimeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.th-dateinotiz { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-style: italic; }
.th-dateiknoepfe {
  display: flex; gap: 2px; padding: 4px 7px 7px; margin-top: auto;
}
.th-dateiknoepfe > * { text-decoration: none; }

.th-infokopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.th-infokopf .th-dateisymbol { width: 44px; height: 44px; border-radius: 11px; background: var(--bg); flex: 0 0 auto; }

/* ---- Kontakte ---- */
.th-kontakte { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.th-kontakt {
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  background: var(--card); display: flex; flex-direction: column; gap: 6px;
}
.th-kontaktkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.th-kontaktname { font-weight: 600; font-size: 14.5px; }
.th-kontaktrolle { font-size: 12px; color: var(--muted); margin-top: 1px; }
.th-kontaktzeile {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--brand-text); text-decoration: none;
}
.th-kontaktzeile:hover { text-decoration: underline; }
.th-kontaktnotiz { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---- Notizen ---- */
.th-eintrag {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 4px 12px 12px 4px; padding: 13px 16px; margin-bottom: 10px;
  background: var(--card); cursor: pointer; transition: box-shadow .15s;
}
.th-eintrag:hover { box-shadow: var(--shadow); }
.th-eintragtitel { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.th-eintragtext {
  margin: 0 0 7px; font-size: 14px; line-height: 1.55; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Hochladen mit Fortschritt ----
   Bei einer Datei über ein Gigabyte dauert der Upload Minuten. Ohne Balken hält man die
   App für abgestürzt und bricht ab — deshalb ist das hier keine Zierde. */
.th-fortschritt { display: grid; gap: 9px; margin-top: 4px; }
.th-fortschrittname {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-fortschrittbalken {
  height: 9px; border-radius: 5px; background: rgba(0,0,0,.08); overflow: hidden;
}
.th-fortschrittfuell {
  height: 100%; width: 0; background: var(--brand); border-radius: 5px;
  transition: width .2s ease;
}
.th-fortschrittzahl { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.th-dropnotiz { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }

/* ---- Senden ---- */
.th-linkbox {
  background: var(--brand-soft); border-radius: 11px; padding: 12px 14px; margin: 4px 0 2px;
}
.th-linkzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.th-linkfeld {
  flex: 1 1 220px; min-width: 0; font-size: 12.5px; font-family: inherit;
  background: #fff;
}
.th-teilenkopf {
  margin: 18px 0 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); font-weight: 700;
}
.th-linkzeile2 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 9px; min-width: 0;
}
.th-linkzeile2:hover { background: var(--bg); }
.th-linkzeile2 > div { min-width: 0; }
.th-linkmini {
  font-size: 12px; color: var(--brand-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Symbol- und Farbwahl ---- */
.th-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.th-symbolknopf {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); font-size: 18px; cursor: pointer; line-height: 1;
  transition: border-color .12s, background .12s;
}
.th-symbolknopf:hover { background: var(--bg); }
.th-symbolknopf.aktiv { border-color: var(--brand); background: var(--brand-soft); }
/* Die Symbole sind gezeichnete Linien, keine Emojis: Sie brauchen eine Farbe.
   Grau im Ruhezustand, in der Markenfarbe, sobald sie gewählt sind. */
.th-symbolknopf { display: inline-flex; align-items: center; justify-content: center; --ico: var(--muted); }
.th-symbolknopf.aktiv { --ico: var(--brand-dark); }
/* Ein altes Emoji bleibt ein Emoji — es wird nur nicht mehr neu vergeben. */
.th-emoji { font-size: 1em; line-height: 1; }
.th-symbolflaeche .th-emoji { font-size: 40px; }
.th-akte-symbol .th-emoji { font-size: 23px; }
.th-symbolklein .th-emoji { font-size: 17px; }
.th-leerzeichen { --ico: var(--muted); }
.th-farbknopf {
  width: 32px; height: 32px; border-radius: 9px; border: 2px solid transparent;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.th-farbknopf.aktiv { border-color: var(--ink); }
.th-farbknopf.ohne {
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); font-size: 15px; line-height: 1;
}
.th-farbzeile { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
/* .field input setzt width:100% und ist mit zwei Klassen spezifischer als
   .th-farbeigen allein — ohne den Vorfahren im Selektor wird der Farbwähler 1200 px
   breit und zieht das ganze Fenster auseinander. Genau das ist hier passiert. */
.field .th-farbeigen {
  width: 44px; height: 32px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); cursor: pointer; flex: 0 0 auto;
}

/* ---- Auswahl mehrerer Dateien ----
   Der Auswahlmodus ist ein Zustand der Liste, kein eigener Bildschirm: Die Kacheln
   bleiben stehen, es kommt nur das Häkchen dazu. Ein eigener „Senden"-Bildschirm
   hätte bedeutet, dass man die Vorschaubilder verliert, an denen man die Datei erkennt. */
.th-auswahlleiste {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 13px;
  border: 1px solid var(--brand); border-radius: 11px;
  background: var(--brand-soft);
}
.th-auswahlzahl { font-size: 13.5px; font-weight: 600; color: var(--brand-text); }
.th-auswahlknoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.th-auswahlhaken {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  width: 24px; height: 24px; padding: 0; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(255,255,255,.94);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  color: transparent; box-shadow: 0 1px 3px rgba(15, 23, 42, .16);
}
.th-dateien.auswaehlen .th-auswahlhaken { display: flex; }
.th-datei.gewaehlt .th-auswahlhaken {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.th-datei.gewaehlt { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
/* Im Auswahlmodus sind die Einzelknöpfe nur Ablenkung — ausgewählt wird die Kachel. */
.th-dateien.auswaehlen .th-dateiknoepfe { opacity: .35; pointer-events: none; }

/* ---- Empfängervorschläge beim Senden ---- */
.th-vorschlagkopf {
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 7px;
}
.th-vorschlaege { display: flex; flex-wrap: wrap; gap: 7px; }
.th-vorschlag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer; font: inherit; text-align: left;
  text-decoration: none; max-width: 100%;
  transition: border-color .12s, background .12s;
}
.th-vorschlag:hover { border-color: var(--brand); background: var(--brand-soft); }
.th-vorschlagname {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-vorschlaggrund { font-size: 11px; color: var(--muted); }
.th-whatsliste { margin-top: 10px; }
.th-absender { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; }
/* Der Verlauf im Sendefenster bringt eine eigene .card mit — die braucht hier weder
   Rahmen noch Schatten, sonst steht ein Kasten im Kasten. */
.th-sendeverlauf .card { border: 0; box-shadow: none; padding: 0; background: none; }
.th-sendeverlauf { max-height: 320px; overflow-y: auto; }
.th-kontaktaktion { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ---- Liste der zu sendenden Dateien ---- */
.th-sendeliste {
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 13px 12px;
  background: var(--bg); margin-bottom: 12px;
  max-height: 220px; overflow-y: auto;
}
.th-sendeliste .th-vorschlagkopf { margin-top: 0; }
.th-sendezeile { display: flex; align-items: center; gap: 9px; padding: 3px 0; min-width: 0; }
.th-sendename {
  flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-dateisymbol.klein {
  width: 24px; height: 24px; border-radius: 7px; background: var(--card);
  flex: 0 0 auto; border: 1px solid var(--line);
}

/* ---- Archiv ansehen ---- */
.th-zipliste {
  border: 1px solid var(--line); border-radius: 11px; background: var(--card);
  max-height: 340px; overflow-y: auto; margin: 10px 0 0;
}
.th-zipzeile {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0;
}
.th-zipzeile:last-child { border-bottom: 0; }
.th-zipzeile:hover { background: var(--bg); }
.th-zipzeile.gesperrt { opacity: .55; cursor: not-allowed; }
.th-zipname {
  flex: 1 1 auto; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-zipfuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 11px;
}

/* ---- Kategorie: eigene Farbe und eigenes Bild ---- */
.th-katunter {
  margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor;
  opacity: .75;
}
.th-katbild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28;
}
.th-katkopftext { flex: 1 1 auto; min-width: 0; }
.th-katknoepfe { display: flex; gap: 7px; flex-wrap: wrap; }

/* ================= Themen: Ordnerspalte =================
   Vorher standen drei Leisten übereinander (Hauptkategorien, Unterkategorien,
   Kategoriekopf) — bei acht Kategorien war die halbe Seite Knopfleiste, und wo man
   gerade steht, sah man erst beim dritten Hinsehen. Jetzt der Aufbau, den jeder vom
   Dateimanager kennt: links die Ordner, rechts ihr Inhalt. */
.th-zahlen {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 0 0 14px; padding: 0 0 13px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.th-zahlen strong { color: var(--ink); font-weight: 600; margin-right: 4px; }

.th-arbeitsflaeche {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px;
  align-items: start;
}
.th-ordner {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--bg);
  position: sticky; top: 14px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.th-ordnerzeile {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 13.5px; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.th-ordnerzeile:hover { background: var(--card); }
.th-ordnerzeile.aktiv { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .09); }
/* Der farbige Strich links zeigt die Kategoriefarbe, ohne den Text einzufärben —
   eingefärbter Text wäre bei hellen Farben kaum lesbar. */
.th-ordnerzeile.aktiv { box-shadow: inset 3px 0 0 var(--katf, var(--brand)), 0 1px 3px rgba(15, 23, 42, .09); }
.th-ordnerpunkt {
  width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto;
  background: var(--line);
}
.th-ordnerbild { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.th-ordnername {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.th-ordnerzahl {
  flex: 0 0 auto; font-size: 11.5px; color: var(--muted);
  background: var(--card); border-radius: 999px; padding: 1px 7px;
}
.th-ordnerzeile.aktiv .th-ordnerzahl { background: var(--bg); }
/* Ein Dreieck sagt, dass darin noch etwas steckt — ohne es müsste man jede Kategorie
   einmal anklicken, um das herauszufinden. */
.th-ordnerzeile.hatunter .th-ordnername::after { content: ' ▸'; color: var(--muted); font-size: 10px; }
.th-ordnerzeile.hatunter.offen .th-ordnername::after { content: ' ▾'; }
.th-unterordner {
  display: flex; flex-direction: column; gap: 2px;
  margin: 1px 0 3px 17px; padding-left: 9px;
  border-left: 1px solid var(--line);
}
.th-unterordner .th-ordnerzeile { font-size: 13px; padding: 6px 9px; }
.th-ordnerneu {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 9px;
  background: none; font: inherit; font-size: 12.5px; color: var(--muted);
  cursor: pointer; --ico: var(--muted);
}
.th-ordnerneu:hover { border-color: var(--brand); color: var(--brand-text); --ico: var(--brand-dark); }

.th-inhaltsseite { display: flex; flex-direction: column; gap: 13px; min-width: 0; }

/* ---- Ordner INNERHALB eines Themas ----
   Eine waagerechte Reiterleiste, keine zweite Seitenspalte: Der Dateibereich ist schon
   der Inhalt einer Spalte, und eine Spalte in der Spalte wäre am Handy nicht zu bedienen. */
.th-ordnerband {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 12px; padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
}
.th-ordnertab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; --ico: var(--muted);
  transition: border-color .12s, background .12s;
}
.th-ordnertab:hover { border-color: var(--brand); }
.th-ordnertab.aktiv {
  border-color: var(--brand); background: var(--brand-soft);
  font-weight: 600; --ico: var(--brand-dark);
}
.th-ordnerneu.klein { margin-top: 0; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; }

/* ================= Ziehen und Ablegen =================
   Das mitfliegende Bild liegt im OBERSTEN Fenster, damit es über die Grenze eines
   abgelegten Fensters (iframe) hinweg sichtbar bleibt. Deshalb ein sehr hoher
   z-index: Es muss über allem liegen, auch über offenen Fenstern (70) und Dialogen. */
.zieh-geist {
  position: fixed; z-index: 9999; pointer-events: none;
  transform: translate(10px, 10px);
  padding: 7px 13px; border-radius: 10px;
  background: var(--brand); color: var(--brand-ink);
  font-size: 13px; font-weight: 600; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .28);
}
/* Über einem gültigen Ziel steht dran, wohin es geht — man soll vor dem Loslassen
   wissen, wo es landet, nicht danach. */
.zieh-geist[data-ziel]:not([data-ziel=""])::after {
  content: " → " attr(data-ziel); font-weight: 400; opacity: .85;
}
.zieh-geist.kannnicht { background: var(--muted); }
/* Während eines Zugs darf nichts markiert werden — sonst zieht man blauen Text mit. */
body.zieht { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.zieht iframe { pointer-events: none; }

.zieh-quelle { cursor: grab; }
/* Wo ein eigener Griff gesetzt ist, zeigt nur DER die Greifhand — sonst sieht die
   ganze Zeile ziehbar aus, obwohl nur ein Teil davon anfasst. */
.zieh-griff { cursor: grab; }
/* Auf der großen Öffnen-Fläche gewinnt sonst der Zeiger des Knopfes (pointer), und
   man sieht gar nicht, dass sich hier etwas ziehen lässt. */
.zieh-quelle .zieh-frei { cursor: grab; }
.zieh-quelle .zieh-frei:active { cursor: grabbing; }
/* Der Anfasser zum Ziehen auf den Rechner. Eigenes Element, weil ein draggable-
   Element vom Browser übernommen wird und das App-interne Ziehen dann keine
   Bewegungen mehr bekäme. */
.pc-zieh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; cursor: grab;
  color: var(--muted); --ico: var(--muted);
}
.pc-zieh:hover { background: var(--bg); --ico: var(--brand-dark); }
.pc-zieh:active { cursor: grabbing; }
.pc-ziehknopf { display: inline-flex; align-items: center; gap: 4px; cursor: grab; }

/* ================= Die Ablagemappe =================
   Sie liegt im OBERSTEN Fenster und damit über allem — auch über abgelegten Fenstern
   (z-index 70). Nur so ist sie beim Seitenwechsel noch da, und nur so kann man aus
   einem Fenster hineinziehen. */
.mappe {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 260px; max-width: calc(100vw - 36px);
  border-radius: 13px; overflow: hidden;
  background: var(--card); border: 1px solid var(--brand);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .22);
  font-size: 13px;
}
.mappe-kopf {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 14px; border: 0; background: var(--brand); color: var(--brand-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.mappe-zahl {
  flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.25); display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px;
}
.mappe-text { flex: 1 1 auto; min-width: 0; }
.mappe-pfeil { flex: 0 0 auto; transition: transform .15s; }
.mappe-kopf.auf .mappe-pfeil { transform: rotate(180deg); }
/* Zugeklappt ist nur die Kopfzeile zu sehen — sie soll nicht den halben Bildschirm
   verdecken, während man auf der Seite arbeitet. */
.mappe-koerper { display: none; max-height: 46vh; overflow-y: auto; padding: 8px; }
.mappe.auf .mappe-koerper { display: block; }
.mappe-zeile {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.mappe-zeile:last-of-type { border-bottom: 0; }
.mappe-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mappe-weg {
  flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; font: inherit;
}
.mappe-weg:hover { background: var(--bg); color: var(--danger, #b42318); }
.mappe-fuss { display: flex; gap: 7px; padding: 9px 4px 2px; }
.mappe-ablegen, .mappe-leeren {
  flex: 1 1 auto; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); font: inherit; font-size: 12.5px; cursor: pointer;
}
.mappe-ablegen { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.mappe-leeren { flex: 0 0 auto; color: var(--muted); }
/* Aus der Mappe herausziehen ist der eigentliche Sinn — das muss man sehen. */
/* Leer ist sie nur während eines Zugs da — dann als gestrichelte Fläche, damit
   man sieht: hier kann etwas hinein, hier liegt noch nichts. */
.mappe.leer { border-style: dashed; }
.mappe.leer .mappe-kopf { background: var(--brand-soft); color: var(--brand-text); }
.mappe.leer .mappe-zahl { background: rgba(0,0,0,.08); }
.mappe-ziehbar { cursor: grab; border-radius: 7px; }
.mappe-ziehbar:hover { background: var(--bg); }
.mappe-kopf { cursor: grab; }
.mappe-vorschau {
  max-height: 30vh; overflow-y: auto; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 4px 8px; background: var(--bg);
}
/* Beim Ziehen leuchtet sie auf wie jede andere Zone. */
.mappe.zieh-ueber { outline-offset: 3px; }

@media (max-width: 560px) {
  .mappe { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
}
.zieh-quelle:has(.zieh-griff) { cursor: default; }
.zieh-aktiv { opacity: .45; }
/* Lange gedrückt: Die Kachel färbt sich, damit man merkt, dass die Geste erkannt
   wurde — sonst hält man weiter und weiß nicht, ob etwas passiert. */
.zieh-gehalten { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Das Ziel leuchtet auf. Kein Rahmen, der die Größe ändert — das Raster würde sonst
   unter dem Finger springen. */
.zieh-ueber {
  outline: 2px dashed var(--brand); outline-offset: 2px;
  background: var(--brand-soft) !important;
}
/* .pj-suchbox hat `flex: 1 1 220px` — in einer waagerechten Leiste ist das richtig,
   in dieser SENKRECHTEN Spalte wuchs das Suchfeld dadurch auf 180 px Höhe. */
.th-inhaltsseite > .pj-suchbox { flex: 0 0 auto; }
.th-inhaltsseite > .th-ordnerkopf { flex: 0 0 auto; }

/* Die PDF-Vorschau auf der Dateikachel zeigt den OBEREN Teil der ersten Seite —
   dort steht bei einer Rechnung der Absender und die Nummer, also genau das, woran man
   sie erkennt. Mittig zentriert sähe man bei einem hohen Blatt nur weiße Mitte. */
.th-dateiflaeche .th-pdfvorschau { align-items: flex-start; }
.th-dateiflaeche .th-pdfvorschau .pdfvorschau-seiten { left: 6px; bottom: 6px; font-size: 9.5px; }
/* Am PC ist die Ordnerspalte immer da — der Ausklapper ist nur fürs Handy. */
.th-ordnerklapp { display: none; }

.th-ordnerkopf {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 13px; background: var(--bg);
  border-left: 4px solid var(--katf, var(--line));
}
.th-ordnerkopf.mitbild { min-height: 92px; }
.th-ordnerkopf > :not(.th-katbild) { position: relative; z-index: 1; }
.th-ordnerkopf h3 { margin: 0; font-size: 17px; color: var(--katf, var(--ink)); }
.th-ordnerweg { font-size: 12.5px; color: var(--muted); }
.th-katleer {
  grid-column: 1 / -1; text-align: center; padding: 26px 16px;
  border: 1px dashed var(--line); border-radius: 13px; color: var(--muted);
}
.th-katleer p { margin: 0 0 12px; font-size: 14px; }
.th-katbildbox { display: flex; align-items: flex-start; gap: 13px; flex-wrap: wrap; }
.th-katvorschau {
  width: 140px; height: 86px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line); background: var(--bg); flex: 0 0 auto;
}
.th-katvorschau.leer {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted);
}

@media (max-width: 560px) {
  .th-auswahlleiste { position: sticky; top: 0; z-index: 3; }
  .th-auswahlknoepfe { flex: 1 1 100%; }
  .th-auswahlknoepfe > * { flex: 1 1 0; }
  .th-ordnerkopf { flex-wrap: wrap; }
  .th-katknoepfe { flex: 1 1 100%; }
  .th-katknoepfe > .btn { flex: 1 1 0; }
  /* Eine Spalte, und die Ordnerliste liegt zugeklappt über dem Inhalt: ausgeklappt
     nähme sie am Telefon den ganzen ersten Bildschirm ein. */
  .th-arbeitsflaeche { grid-template-columns: 1fr; gap: 0; }
  .th-arbeitsflaeche > .th-ordner { display: none; }
  .th-arbeitsflaeche > .th-ordner.auf {
    display: flex; position: static; max-height: 46vh; margin-bottom: 12px;
  }
  .th-ordnerklapp {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--bg); font: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink); cursor: pointer; --ico: var(--muted);
  }
  .th-ordnerklapptext { flex: 1 1 auto; min-width: 0; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .th-ordnerpfeil { flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
  .th-ordnerklapp.auf .th-ordnerpfeil { transform: rotate(180deg); }
  .th-zahlen { gap: 4px 16px; font-size: 12px; }
  .th-katvorschau { width: 100%; height: 120px; }
  .th-sendeliste { max-height: 160px; }
  .th-zipliste { max-height: 240px; }
  .th-vorschlag { flex: 1 1 100%; }
  .th-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .th-symbolflaeche, .th-bild { height: 74px; }
  .th-symbolflaeche { font-size: 31px; }
  .th-inhalt { padding: 11px 12px 12px; gap: 5px; }
  .th-titel { font-size: 15px; }
  .th-dateien { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .th-dateiflaeche { height: 92px; }
  .th-kontakte { grid-template-columns: 1fr; }
  .th-akte-titel h2 { font-size: 19px; }
  .th-akte-symbol { width: 38px; height: 38px; font-size: 20px; }
}

/* ---- Google Drive (Einstellungen → Backup) ----
   Bewusst schlicht: Der Kasten soll auf einen Blick sagen, ob gesichert wird und wohin.
   Alles, was nach Verzierung aussieht, lenkt davon ab. */
.drive-stand { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.drive-schritte { margin: 8px 0 0 18px; line-height: 1.75; }
.drive-schritte code, .field .hint code { background: var(--bg); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; font-size: 11.5px; word-break: break-all; }
.drive-liste { display: flex; flex-direction: column; gap: 4px; }
.drive-zeile { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px;
  border-bottom: 1px solid var(--line); }
/* Der Name darf kürzen, die Größe/Datum rechts nicht — sonst steht da „… · 0,6" */
.drive-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13px; }
.drive-zeile .hint { flex: 0 0 auto; white-space: nowrap; }
.warn-text { color: #b45309; font-weight: 600; }

/* Am Handy bleiben vom Dateinamen sonst nur 112 px übrig — „arbeitszeit-ba…" sagt nichts.
   Deshalb Name über Größe/Datum statt nebeneinander. Eigener @media-Block am Dateiende,
   damit kein bestehender Block angefasst werden muss (Lehre aus v227). */
@media (max-width: 560px) {
  .drive-zeile { flex-direction: column; align-items: stretch; gap: 1px; }
  .drive-name { white-space: normal; overflow: visible; word-break: break-all; }
}

/* Fortschritt beim Drive-Upload. Ein halbes Gigabyte dauert Minuten — ohne sichtbaren
   Balken hält man die App für hängengeblieben und drückt noch einmal. */
.drive-lauf { margin-top: 12px; }
.drive-balken { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.drive-balken-voll { height: 100%; background: var(--brand); border-radius: 999px;
  transition: width .4s ease; }

/* ==========================================================================
   HANDY-OBERFLÄCHE — nach dem Entwurf vom 20.09.2026
   ==========================================================================
   Gilt NUR unter 721 px. Am PC bleibt alles, wie es war: Dort funktioniert die
   Seitenleiste, und ein Umbau wäre Risiko ohne Gewinn.

   Der Block steht bewusst ganz am Ende der Datei. Weiter oben stehen rund 80 ältere
   Handy-Regeln; bei gleicher Spezifität gewinnt die spätere. Wo das nicht reicht, steht
   es als Kommentar an der Regel — blindes !important verteilen macht die Datei
   unwartbar.

   Farben aus dem Entwurf:
     #0E4F35  Logo-Grün, Kopfzeile und aktive Elemente
     #22A45D  Akzent (Scan-Knopf, erste Kachel, Terminmarke)
     #E4F2EA  Kachelgrund hellgrün
     #F4F3EE  Seitenhintergrund
     #14161C  Text · #5A6170 Nebentext · #B3261E rot (überfällig)
     #D6D9DE  Rahmen
   ========================================================================== */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  :root {
    /* v461: Logo-Farben. Die Namen (gruen/akzent/hell) bleiben, damit nichts bricht — gruen ist jetzt Nachtblau, akzent Gold. */
    --h-gruen: #1F2A40;
    --h-akzent: #E0A83F;
    --h-hell: #FBF1DC;
    --h-grund: #F3F4F7;
    --h-ink: #14161C;
    --h-grau: #5A6170;
    --h-rot: #B3261E;
    --h-rahmen: #D6D9DE;
    --h-gruen-matt: #AAB4C8;
  }

  body { background: var(--h-grund); font-family: Archivo, system-ui, -apple-system, sans-serif; }

  /* ---- Kopfzeile: dunkelgrüne, gerundete Leiste mit Abstand ---- */
  header.topbar {
    background: var(--h-gruen);
    margin: 10px 10px 0;
    padding: 10px 12px;
    border-radius: 26px;
    border: none;
    box-shadow: none;
    gap: 8px;
    align-items: center;
    min-height: 62px;
    position: relative;
  }
  /* Der Menü-Knopf entfällt — das Menü sitzt jetzt unten in der Leiste. */
  header.topbar .nav-toggle { display: none; }

  header.topbar .brand { flex: 1 1 0; min-width: 0; gap: 6px; }
  header.topbar .brand-logo { height: 26px; }
  /* Firmenname und Untertitel weichen der Begrüßung in der Mitte. */
  header.topbar .brand-text { display: none; }

  /* Die Begrüßung in der Mitte (wird in renderTopbar gebaut). */
  .h-gruss { display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1.25; min-width: 0; flex: 0 1 auto; }
  .h-gruss-name { font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: 14px;
    font-weight: 700; color: #fff; letter-spacing: -0.01em; white-space: nowrap; }
  .h-gruss-datum { font-size: 10px; font-weight: 600; color: var(--h-gruen-matt); white-space: nowrap; }
  .h-gruss-spruch { font-size: 10px; font-weight: 600; font-style: italic; color: #F2C46B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 175px; }

  /* Der Spruch steht am Handy IN der Begrüßung, nicht mehr als eigener Block. */
  header.topbar .topbar-spruch { display: none; }

  /* Rechts bleiben nur Suche und Postfach. Alles andere ist über das Menü erreichbar
     und würde die 62-px-Leiste sprengen. */
  header.topbar .right { flex: 1 1 0; justify-content: flex-end; gap: 2px; }
  header.topbar .right > * { display: none; }
  header.topbar .right > .h-kopf-knopf { display: flex; }
  .h-kopf-knopf { width: 38px; height: 42px; border: none; background: transparent; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #fff; --ico: #fff; position: relative; }
  .h-kopf-knopf svg { width: 19px; height: 19px; }
  /* Der Punkt sagt „da ist etwas Neues" — eine Zahl wäre in 8 px nicht lesbar. */
  .h-kopf-punkt { position: absolute; top: 7px; right: 5px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--h-akzent); border: 2px solid var(--h-gruen); }

  /* ---- Inhalt: Platz für die schwebende Leiste unten ---- */
  main.content { padding-bottom: 104px; }

  /* ---- Untere Navigationsleiste ---- */
  .h-leiste {
    position: fixed; left: 14px; right: 14px; bottom: 22px; height: 62px; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
    padding: 0 10px; box-sizing: border-box;
    background: #fff; border: 1px solid #E3E8E5; border-radius: 21px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  }
  .h-leiste-knopf { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: transparent; border-radius: 14px;
    color: #78857F; --ico: #78857F; cursor: pointer; padding: 0; gap: 7px; }
  .h-leiste-knopf svg { width: 22px; height: 22px; }
  .h-leiste-knopf .h-leiste-wort { display: none; font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.01em; }
  /* Nur der aktive Punkt trägt seinen Namen — fünf Wörter nebeneinander passen nicht. */
  .h-leiste-knopf.aktiv { background: var(--h-hell); color: var(--h-gruen); --ico: var(--h-gruen);
    width: auto; padding: 0 12px; }
  .h-leiste-knopf.aktiv .h-leiste-wort { display: inline; }
  /* Der Scan-Knopf sitzt höher und trägt einen weißen Ring, damit er über der Leiste
     zu schweben scheint. */
  .h-leiste-scan { width: 52px; height: 52px; border-radius: 50%; background: var(--h-akzent);
    color: #1B2538; --ico: #1B2538; margin-top: -16px; flex-shrink: 0;
    box-shadow: 0 0 0 5px #fff, 0 5px 12px rgba(224, 168, 63, 0.3); }
  .h-leiste-scan svg { width: 24px; height: 24px; }

  /* Die schwebenden Knöpfe (Assistent, Scanner) würden die Leiste verdecken. */
  #scanFab, #aiFab { bottom: 96px; }

  /* Karten und Felder im neuen Stil */
  .card { border-radius: 18px; border: 1px solid var(--h-rahmen); }
}

/* Am PC bleibt die Handy-Leiste weg. Ausdrücklich, damit sie nicht durch eine spätere
   Regel doch auftaucht. */
@media (min-width: 1025px) and (pointer: fine), (min-width: 1101px), (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) { .h-leiste, .h-gruss { display: none !important; } }

/* Firmenwechsel am Logo (Handy). Der Pfeil sagt „hier lässt sich etwas umschalten" —
   ohne ihn hält man das Logo für Zierde. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-firma { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 2px;
    border: none; background: transparent; cursor: pointer; color: #fff; --ico: #A9CBB9; }
  .h-firma-kurz { font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: 13px;
    font-weight: 700; color: #fff; max-width: 96px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .h-firma-kurz:empty { display: none; }
}
@media (min-width: 1025px) and (pointer: fine), (min-width: 1101px), (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) { .h-firma { display: none !important; } }

/* Das Firmenlogo im Kopf. 26 px hoch wie im Entwurf; die Breite richtet sich danach,
   damit ein breites und ein quadratisches Logo beide sauber sitzen. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-firma-logo { height: 26px; width: auto; max-width: 118px; object-fit: contain; display: block; }
  .h-firma-logo[hidden] { display: none; }
  /* Das Logo aus index.html steht am Handy im Knopf — das ursprüngliche daneben entfällt,
     sonst erschiene es doppelt. */
  header.topbar .brand > .brand-logo { display: none; }
}

/* ---- Handy-Startseite (Entwurf vom 20.09.2026) ---- */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  main.content:has(.hs-kacheln) { padding: 14px 20px 108px; display: flex; flex-direction: column; gap: 16px; }

  /* Vier Schnellkacheln */
  .hs-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .hs-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; height: 92px; padding: 0 4px; background: #fff; border: 1px solid var(--h-rahmen);
    border-radius: 16px; color: var(--h-ink); cursor: pointer; }
  .hs-kachel-sym { width: 40px; height: 40px; border-radius: 13px; background: var(--h-hell);
    display: flex; align-items: center; justify-content: center; --ico: var(--h-gruen); }
  /* Die erste Kachel ist die am häufigsten gebrauchte und deshalb farblich hervorgehoben. */
  .hs-kachel.betont .hs-kachel-sym { background: var(--h-akzent); --ico: #1B2538; }
  .hs-kachel-wort { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }

  /* Karten */
  .hs-karte { background: #fff; border: 1px solid var(--h-rahmen); border-radius: 18px;
    padding: 16px 16px 4px; }
  .hs-karte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .hs-karte-kopf h2 { margin: 0; font-family: 'Bricolage Grotesque', Archivo, sans-serif;
    font-size: 16px; font-weight: 700; }
  .hs-mehr { border: none; background: transparent; font-size: 13px; font-weight: 600;
    color: var(--h-gruen); cursor: pointer; padding: 0; }
  .hs-leer { color: var(--h-grau); font-size: 13px; padding-bottom: 14px; margin: 0; }

  /* Termine */
  .hs-termin { display: flex; gap: 12px; width: 100%; text-align: left; border: none;
    background: transparent; padding: 0 0 13px; color: var(--h-ink); cursor: pointer; }
  .hs-termin-zeit { display: flex; flex-direction: column; align-items: flex-end; width: 42px; flex-shrink: 0; }
  .hs-termin-von { font-size: 15px; font-weight: 700; }
  .hs-termin-bis { font-size: 12px; font-weight: 500; color: var(--h-grau); }
  /* Der Strich sagt auf einen Blick, ob der Termin heute ist — grün heute, grau später. */
  .hs-termin-strich { width: 3px; border-radius: 2px; background: #C7CCD6; flex-shrink: 0; }
  .hs-termin-strich.jetzt { background: var(--h-akzent); }
  .hs-termin-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .hs-termin-titel { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .hs-termin-ort { font-size: 12px; font-weight: 500; color: var(--h-grau);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hs-trenner { height: 1px; background: #E7E9ED; margin-bottom: 13px; }

  /* Zwei Kennzahlen */
  .hs-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hs-zahl { background: #fff; border: 1px solid var(--h-rahmen); border-radius: 16px; padding: 14px;
    display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--h-ink); cursor: pointer; }
  .hs-zahl-titel { font-size: 12px; font-weight: 600; color: var(--h-grau); }
  .hs-zahl-wert { font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: 21px;
    font-weight: 700; letter-spacing: -0.01em; }
  .hs-zahl-rot { font-size: 12px; font-weight: 600; color: var(--h-rot); }
  .hs-zahl-grau { font-size: 12px; font-weight: 600; color: var(--h-grau); }

  /* Aufgaben */
  .hs-abschnitt { display: flex; flex-direction: column; gap: 10px; }
  .hs-abschnitt .hs-karte-kopf { margin-bottom: 0; }
  .hs-aufgaben { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .hs-aufgabe { background: #fff; border: 1px solid var(--h-rahmen); border-radius: 14px;
    padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-height: 56px; }
  .hs-aufgabe input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--h-gruen); }
  .hs-aufgabe-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hs-aufgabe-titel { font-size: 14px; font-weight: 600; }
  .hs-aufgabe-unten { font-size: 12px; font-weight: 500; color: var(--h-grau); }
  .hs-aufgabe-unten.rot { color: var(--h-rot); font-weight: 600; }
  /* Abgehakt bleibt stehen, bis die Seite neu geladen wird — sonst verschwindet die Zeile
     unter dem Finger und man weiß nicht, ob es geklappt hat. */
  .hs-aufgabe.erledigt { opacity: .5; }
  .hs-aufgabe.erledigt .hs-aufgabe-titel { text-decoration: line-through; }
}

/* Arabische Zeile in der Kopfzeile: rechtsläufig und etwas größer — arabische Schrift
   wirkt bei gleicher Punktgröße deutlich kleiner als lateinische. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-gruss-spruch.arabisch { font-size: 12px; font-style: normal; direction: rtl;
    font-family: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Naskh Arabic', serif;
    max-width: 185px; line-height: 1.45; }
}

/* Das Firmenlogo bekommt eine weiße Fläche. Grund: Das Logo ist durchsichtig und trägt
   dunkelblaue Schrift („Wir bauen schnell & sauber") — die steht auf dem dunklen Grün
   praktisch unlesbar. Auf Weiß stimmen die Firmenfarben wieder. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-firma-logo { background: #fff; border-radius: 8px; padding: 3px 6px; height: 30px;
    max-width: 124px; box-sizing: content-box; }
  /* Der Vers braucht mehr Platz als der frühere Spruch — er steht jetzt allein. */
  .h-gruss-spruch.arabisch { font-size: 12.5px; max-width: 200px; }
}

/* Die Begrüßung bleibt auf den 42 px aus dem Entwurf. Ohne feste Höhe wächst die
   Kopfzeile mit der Länge des Verses — arabische Schrift braucht mehr Zeilenhöhe. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-gruss { height: 42px; overflow: hidden; }
  .h-gruss-name { line-height: 1.2; }
  .h-gruss-datum { line-height: 1.2; }
  .h-gruss-spruch.arabisch { font-size: 11.5px; line-height: 1.25; }
}

/* ---- Untere Leiste: alle Punkte gleich breit ----
   Vorher war der aktive Punkt breiter (Symbol PLUS Wort) und schob die übrigen zur
   Seite — die Leiste wirkte dadurch schief. Jetzt bekommt jeder denselben Anteil, und
   der aktive wird allein durch die hellgrüne Fläche hinter dem Symbol kenntlich. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-leiste { justify-content: space-evenly; gap: 0; padding: 0 6px; }
  .h-leiste-knopf { flex: 1 1 0; width: auto; min-width: 0; }
  /* Das Wort entfällt: Fünf Beschriftungen passen bei 375 px nicht nebeneinander, und
     EINE beschriftete zwischen vier stummen ist genau die Unruhe, die weg soll. */
  .h-leiste-knopf .h-leiste-wort { display: none !important; }
  .h-leiste-knopf.aktiv { width: auto; padding: 0; background: transparent; }
  /* Die Markierung sitzt am Symbol, nicht am ganzen Knopf — sonst wäre die Fläche so
     breit wie das Fach und die Leiste sähe wieder unruhig aus. */
  .h-leiste-knopf .ico { display: flex; align-items: center; justify-content: center;
    width: 40px; height: 34px; border-radius: 12px; }
  .h-leiste-knopf.aktiv .ico { background: var(--h-hell); }
  .h-leiste-scan { flex: 0 0 auto; }
  .h-leiste-scan .ico { width: auto; height: auto; background: transparent; }

  /* ---- Scanner: die vier Wege als Raster ----
     Untereinander füllten sie den halben Bildschirm, bevor man überhaupt etwas
     gescannt hatte. */
  .scan-knopfreihe { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .scan-knopfreihe > .btn { width: 100%; justify-content: flex-start; min-height: 46px;
    font-size: 13.5px; padding: 8px 10px; }
  .scan-knopfreihe > .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Der Scan-Knopf behält seine 52 px aus dem Entwurf — die Regel „alle gleich breit"
   darf ihn nicht mitschrumpfen, sonst sitzt er nicht mehr mittig und verliert den Ring. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-leiste-scan { flex: 0 0 52px; width: 52px; height: 52px; }
}

/* Fünf gleich breite Fächer statt Flex. Mit Flex richten sich die Abstände nach der
   Knopfbreite — der größere Scan-Knopf ergab 70/62/61/70 px. Im Raster sitzt jede
   Symbolmitte exakt im Fach, unabhängig davon, wie breit der Knopf darin ist. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-leiste { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    justify-items: center; padding: 0 4px; }
  .h-leiste-knopf { flex: none; width: 100%; }
  .h-leiste-scan { width: 52px; justify-self: center; }
}

/* minmax(0, 1fr) statt 1fr: Sonst zieht der längste Knopftext seine Spalte breiter
   (178,6 gegen 169,6 px) und die beiden Reihen fluchten nicht. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .scan-knopfreihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Die Zählung („n Dateien") gehört unter das Raster, nicht in ein Fach. */
  .scan-knopfreihe > :not(.btn) { grid-column: 1 / -1; }
}

/* Der schwebende Kamera-Knopf entfällt am Handy: Der Scanner sitzt jetzt als grüner
   Knopf mitten in der unteren Leiste. Zwei Knöpfe für dieselbe Sache verwirren, und
   der schwebende verdeckte die letzte Aufgabe. Am PC bleibt er — dort gibt es keine
   untere Leiste. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  #scanFab { display: none !important; }
  /* Der Assistent bleibt, rückt aber über die Leiste. */
  #aiFab { bottom: 100px; }

  /* Lange Aufgabentitel auf zwei Zeilen begrenzen — sonst wächst die Karte auf das
     Dreifache und die Liste wird unlesbar. Der ganze Text steht weiterhin unter
     „Alle ansehen" und beim Antippen. */
  .hs-aufgabe-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
  .hs-termin-titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
}

/* ---- Unternehmen wechseln (Handy) ---- */
.firmen-grund { align-items: flex-end; }
.firmen-blatt { width: 100%; max-width: 560px; margin: 0 auto; background: var(--h-grund, #F4F3EE);
  border-radius: 22px 22px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto; }
.firmen-griff { width: 40px; height: 4px; border-radius: 3px; background: #C7CCD6;
  margin: 0 auto 12px; }
.firmen-blatt h2 { font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: 19px;
  font-weight: 700; margin: 0 0 4px; }
.firmen-hinweis { font-size: 12.5px; color: #5A6170; margin: 0 0 14px; line-height: 1.45; }
.firmen-liste { display: flex; flex-direction: column; gap: 8px; }
.firmen-zeile { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #D6D9DE; border-radius: 16px; padding: 13px 14px;
  color: #14161C; cursor: pointer; }
/* Der aktive Eintrag bekommt einen kräftigen Rahmen statt einer Füllung — so bleibt die
   Liste ruhig und man sieht trotzdem sofort, wo man ist. */
.firmen-zeile.aktiv { border: 2px solid #1F2A40; padding: 12px 13px; }
.firmen-zeile.laedt { opacity: .5; pointer-events: none; }
.firmen-marke { width: 56px; height: 42px; border-radius: 12px; background: #E4F2EA;
  color: #1F2A40; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 0 6px; box-sizing: border-box; }
.firmen-marke.aktiv { background: #1F2A40; color: #fff; }
.firmen-marke.hat-logo { background: #fff; border: 1px solid #E7E9ED; }
.firmen-marke img { max-width: 100%; max-height: 100%; object-fit: contain; }
.firmen-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.firmen-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmen-ort { font-size: 12px; color: #5A6170; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firmen-haken { --ico: #1F2A40; flex-shrink: 0; }
.firmen-zurueck { width: 100%; margin-top: 14px; }

/* ---- Menüseite am Handy (Entwurf vom 20.09.2026) ---- */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  main.content:has(.hm-abschnitt) { padding: 14px 16px 108px; display: flex;
    flex-direction: column; gap: 18px; }
  .hm-abschnitt { display: flex; flex-direction: column; gap: 8px; }
  /* Die Überschrift ist klein und grau — sie ordnet, ohne sich vorzudrängen. */
  .hm-titel { margin: 0 0 2px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: #8A9199; text-transform: uppercase; }
  .hm-liste { background: #fff; border: 1px solid var(--h-rahmen); border-radius: 16px;
    overflow: hidden; }
  .hm-zeile { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px;
    padding: 0 14px; border: none; background: transparent; color: var(--h-ink);
    text-align: left; cursor: pointer; }
  /* Trennlinie zwischen den Zeilen, aber nicht unter der letzten. */
  .hm-zeile + .hm-zeile { border-top: 1px solid #EFF1F3; }
  .hm-zeile:active { background: #F6F8F7; }
  .hm-sym { width: 30px; height: 30px; border-radius: 10px; background: var(--h-hell);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    --ico: var(--h-gruen); }
  .hm-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hm-zahl { font-size: 13px; font-weight: 600; color: #6B7280; flex-shrink: 0; }
  .hm-zahl:empty { display: none; }
  /* Rote Blase, wenn etwas überfällig ist — eine graue Zahl übersieht man. */
  .hm-zahl.alarm { background: var(--h-rot); color: #fff; font-size: 12px; font-weight: 700;
    border-radius: 999px; padding: 3px 9px; }
  .hm-pfeil { --ico: #C0C6CC; flex-shrink: 0; display: flex; transform: rotate(-90deg); }
}

/* Anfragen-Knopf in der Kopfzeile: Zahl statt Punkt. Bei einer Anfrage schaut man
   sofort nach, bei acht wartenden anders als bei einer — der Unterschied gehört
   sichtbar gemacht. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-kopf-anfragen { width: 40px; }
  .h-kopf-zahl { position: absolute; top: 4px; right: 0; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 999px; background: var(--h-rot); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
    border: 2px solid var(--h-gruen); box-sizing: content-box; }
  .h-kopf-zahl[hidden] { display: none; }
  /* Mit drei Knöpfen rechts wird es eng — die Begrüßung darf schmaler werden, sie
     kürzt von selbst ab. */
  .h-gruss-spruch.arabisch { max-width: 150px; }
  .h-gruss-name, .h-gruss-datum { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}

/* Die Zahl gehört an die OBERE ECKE, nicht auf das Symbol. Beim ersten Anlauf lag die
   Blase mittig über dem Zeichen — man sah nur noch zwei rote Punkte und wusste nicht
   mehr, welcher wofür steht. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-kopf-knopf { width: 42px; }
  .h-kopf-anfragen { width: 42px; }
  .h-kopf-zahl { top: 2px; right: 1px; min-width: 15px; height: 15px; line-height: 15px;
    font-size: 9.5px; padding: 0 3px; border-width: 1.5px; }
  /* Das Symbol rückt ein Haar nach unten, damit Blase und Zeichen sich nicht berühren. */
  .h-kopf-knopf .ico { margin-top: 5px; }
}

/* Feste Größe mit border-box. Mit content-box addierten sich Polsterung und Rahmen auf
   die 15 px und machten die Blase 24 × 18 groß — sie lag damit wieder auf dem Symbol. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-kopf-zahl { box-sizing: border-box; width: 16px; min-width: 16px; height: 16px;
    padding: 0; top: 1px; right: 1px; font-size: 9.5px; line-height: 13px; border-width: 1.5px; }
  /* Dreistellig („99+") darf sie breiter werden, sonst wird abgeschnitten. */
  .h-kopf-zahl.breit { width: auto; min-width: 16px; padding: 0 3px; }
  .h-kopf-knopf .ico { margin-top: 7px; }
}

/* ---- Tablet: nur EINE Navigation ----
   Die Seitenleiste wird erst ab 860 px zur Schublade. Seit das neue Design bis 1024 px
   gilt, standen zwischen 861 und 1024 px BEIDE Navigationen nebeneinander — die feste
   Seitenleiste links und die neue Leiste unten. Deshalb hier dieselbe Schubladen-Regel
   für den ganzen Bereich; geöffnet wird sie über das Menü in der unteren Leiste. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .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 { max-width: 100%; }
}

/* ---- Tablet: die Fläche wirklich nutzen ----
   Erster Anlauf hatte den Inhalt auf 680 px begrenzt — auf einem 1000 px breiten Tablet
   klebte damit alles in der Mitte und rechts und links blieb es leer.
   Jetzt läuft der Inhalt über die ganze Breite. Nur GESTRECKT würde er aber auch nicht
   gut: Eine Aufgabenzeile über 1000 px mit drei Wörtern links sieht verloren aus.
   Deshalb wird ab 820 px ZWEISPALTIG gesetzt — links die Übersicht, rechts die Arbeit. */
@media (min-width: 700px) and (max-width: 1024px) and (pointer: fine), (min-width: 700px) and (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  main.content:has(.hs-kacheln), main.content:has(.hm-abschnitt),
  main.content:has(.hl-liste) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
  header.topbar { margin-left: 16px; margin-right: 16px; }
  .h-leiste { left: 50%; transform: translateX(-50%); width: min(620px, calc(100% - 32px)); right: auto; }

  /* Die Schnellkacheln dürfen höher werden, wenn Platz da ist. */
  .hs-kachel { height: 104px; }
  .hs-kachel-sym { width: 46px; height: 46px; border-radius: 15px; }
  .hs-kachel-wort { font-size: 12.5px; }
}

@media (min-width: 820px) and (max-width: 1024px) and (pointer: fine), (min-width: 820px) and (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  /* Startseite zweispaltig: „Heute" und die Kennzahlen links, die Aufgaben rechts.
     Die Kacheln bleiben oben über die volle Breite — sie sind der Einstieg. */
  main.content:has(.hs-kacheln) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
    align-content: start; }
  main.content:has(.hs-kacheln) > .hs-kacheln { grid-column: 1 / -1; }
  main.content:has(.hs-kacheln) > .hs-karte { grid-column: 1; }
  main.content:has(.hs-kacheln) > .hs-zahlen { grid-column: 1; }
  main.content:has(.hs-kacheln) > .hs-abschnitt { grid-column: 2; grid-row: 2 / span 2; }

  /* Menü und Listen zweispaltig — 41 Menüpunkte untereinander sind auf einem Tablet
     drei Bildschirmlängen. */
  main.content:has(.hm-abschnitt) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-content: start; }
  main.content:has(.hl-liste) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-content: start; }
  main.content:has(.hl-liste) > .hl-suche { grid-column: 1 / -1; }
  main.content:has(.hl-liste) > .hl-kopf { grid-column: 1 / -1; }
  main.content:has(.hl-liste) > .hl-liste { grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
}

/* ---- Listenseiten am Handy (Entwurf vom 20.09.2026) ---- */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  main.content:has(.hl-liste) { padding: 16px 20px 108px; display: flex;
    flex-direction: column; gap: 12px; }

  /* Suchfeld */
  .hl-suche { display: flex; align-items: center; gap: 10px; background: #fff;
    border: 1px solid var(--h-rahmen); border-radius: 14px; padding: 0 14px; height: 48px;
    box-sizing: border-box; --ico: #8A9199; }
  .hl-suche input { flex: 1; min-width: 0; border: none; background: transparent;
    font: inherit; font-size: 15px; color: var(--h-ink); outline: none; }

  .hl-kopf { display: flex; align-items: baseline; justify-content: space-between; }
  .hl-kopf h2 { margin: 0; font-family: 'Bricolage Grotesque', Archivo, sans-serif;
    font-size: 15px; font-weight: 700; }
  .hl-anzahl { font-size: 12px; font-weight: 600; color: var(--h-grau); }

  .hl-liste { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 8px; }
  .hl-zeile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--h-rahmen); border-radius: 16px;
    padding: 12px 14px; color: var(--h-ink); cursor: pointer; }
  .hl-zeile:active { background: #F6F8F7; }
  /* Die Initialen ersetzen ein Foto, das es bei Kunden nicht gibt — und man erkennt die
     Zeile schneller als an reiner Schrift. */
  .hl-marke { width: 42px; height: 42px; border-radius: 13px; background: var(--h-hell);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-family: 'Bricolage Grotesque', Archivo, sans-serif; font-size: 14px;
    font-weight: 700; color: var(--h-gruen); }
  .hl-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
  .hl-name { font-size: 14.5px; font-weight: 600; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hl-unten { font-size: 12px; font-weight: 500; color: var(--h-grau); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hl-chip { align-self: flex-start; margin-top: 2px; background: var(--h-hell);
    color: #0B4A30; font-size: 11px; font-weight: 700; padding: 3px 8px;
    border-radius: 999px; }
  .hl-pfeil { --ico: #C0C6CC; flex-shrink: 0; display: flex; transform: rotate(-90deg); }
  .hl-leer { color: var(--h-grau); font-size: 13px; padding: 10px 2px; }

  /* Kopfzeile auf Unterseiten: Titel statt Begrüßung, rechts der Anlegen-Knopf. */
  .h-gruss.nur-titel .h-gruss-name { font-size: 16px; }
  .h-gruss.nur-titel .h-gruss-datum:empty,
  .h-gruss.nur-titel .h-gruss-spruch:empty { display: none; }
  .h-kopf-tat { width: 40px; height: 40px; border-radius: 13px; border: none;
    background: var(--h-akzent); color: #1B2538; --ico: #1B2538; display: flex;
    align-items: center; justify-content: center; cursor: pointer; padding: 0; }
}

/* ---------------------------------------------------------------------------
   Jarvis-Leitstand — über die GANZE Fläche der App.
   Ausdrücklicher Wunsch: „der Jarvis soll über die ganze Fläche in der App sein."
   Der Leitstand ist selbst eine vollständige Oberfläche (eigene Fenster, eigene
   Befehlszeile, eigenes Mikrofon); Menü und Kopfzeile daneben halbieren nur den
   Platz. Sie werden deshalb auf DIESER Ansicht ausgeblendet — genauso wie beim
   Warenbestand (body.almajd-full), nur eben über body.view-jarvis, das render()
   ohnehin bei jedem Zeichnen setzt.
   Die Seite im Rahmen bleibt unverändert; nur am Handy legt jarvis-handy.css
   (im Rahmen selbst) eine eigene Anordnung darüber.
   -------------------------------------------------------------------------- */
body.view-jarvis header.topbar,
body.view-jarvis nav.side,
body.view-jarvis #navBackdrop { display: none !important; }
body.view-jarvis .layout { display: block; margin: 0; padding: 0; }
body.view-jarvis .content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
/* Die schwebenden Knöpfe gehören zur App, nicht zum Leitstand — im Vollbild
   lägen sie über dessen eigener Befehlszeile. */
body.view-jarvis #aiFab,
body.view-jarvis #scanFab,
body.view-jarvis .float-dock { display: none !important; }
/* Die Handy-Leiste unten (nav.h-leiste) deckt sonst die Befehlszeile des
   Leitstands zu — dort steht Mikrofon, Eingabe und Senden. */
body.view-jarvis nav.h-leiste { display: none !important; }

.jarvis-huelle { position: relative; width: 100%; background: #0b1020; }
.jarvis-rahmen { display: block; width: 100%; border: 0;
  /* Volle Höhe des Fensters. dvh statt vh: Am Handy zählt vh die Adressleiste mit,
     dadurch stünde die Befehlszeile des Leitstands unter dem Bildschirmrand. */
  height: 100dvh; }

/* Der Weg zurück. Er schwebt über dem Rahmen, damit der Leitstand die volle
   Fläche behält — oben rechts, weil der Leitstand links seinen Kern zeichnet. */
.jarvis-leiste { position: fixed; top: 10px; right: 12px; z-index: 1210;
  display: none; gap: 6px; }
body.view-jarvis .jarvis-leiste { display: flex; }
.jarvis-zurueck { font: inherit; font-size: 13px; letter-spacing: .06em; font-weight: 600;
  padding: 8px 14px; min-height: 38px; cursor: pointer; border-radius: 8px;
  color: #c9eef7; background: rgba(6, 20, 32, .82);
  border: 1px solid rgba(87, 215, 242, .45); }
.jarvis-zurueck:hover { background: rgba(10, 34, 52, .95); border-color: #57d7f2; }
.jarvis-alt { color: #8fb6cf; border-color: rgba(87, 215, 242, .22); }
@media (max-width: 560px) {
  /* Am Handy nur der Weg zurück — der alte Assistent ist dort kaum zu treffen und
     nimmt der Leiste die Breite. Die Knöpfe sind 40 px hoch (Mindestmaß zum Tippen). */
  .jarvis-alt { display: none; }
  .jarvis-leiste { top: 8px; right: 8px; }
  .jarvis-zurueck { min-height: 40px; padding: 9px 14px; font-size: 13px; }
}
/* ---------------------------------------------------------------------------
   Die schwebende Kartenschicht (Musik-Infos, Karte, Nachrichten, Dateien).
   Sie hängt am <body> und ist damit auf JEDER Seite dieselbe — früher lag sie
   fest auf der KI-Seite, und ein Wechsel in die Buchhaltung riss die Karte weg.
   Die Karten selbst sind oben mitgestaltet (`.ki-schicht .ki-card` steht als
   zweiter Selektor an denselben Regeln wie früher `.assistant-page.ki-fx`).
   -------------------------------------------------------------------------- */
.ki-schicht {
  position: fixed;
  right: 14px;
  /* Über den schwebenden Knöpfen (Kamera sitzt unten rechts), nicht auf ihnen. */
  bottom: 92px;
  z-index: 55;
  width: min(420px, calc(100vw - 28px));
  max-height: min(72vh, 680px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Der Kasten selbst fängt KEINE Klicks ab — nur seine Karten. Sonst läge eine
     unsichtbare Fläche über der halben Seite und man käme nicht mehr an die
     Knöpfe darunter. */
  pointer-events: none;
}
.ki-schicht > * { pointer-events: auto; }
.ki-schicht:empty { display: none; }
/* Die Rollleiste dezent, sie liegt über dem Inhalt der Seite. */
.ki-schicht::-webkit-scrollbar { width: 6px; }
.ki-schicht::-webkit-scrollbar-thumb { background: rgba(120, 180, 255, .35); border-radius: 4px; }

@media (max-width: 560px) {
  /* Am Handy über die volle Breite und höher hinauf — dort ist eine 420-px-Spalte
     am Rand nicht lesbar. Unten bleibt Platz für die Handy-Leiste. */
  .ki-schicht { left: 8px; right: 8px; bottom: 76px; width: auto; max-height: 64vh; }
}
/* NUR in der Warenbestand-App ausgeblendet — das ist eine eigene Anwendung im
   Vollbild, in der es Jarvis gar nicht gibt.
   AUF DER JARVIS-SEITE BLEIBT SIE SICHTBAR. Ein erster Anlauf hat sie auch dort
   ausgeblendet („deckt ja den ganzen Schirm"). Das war falsch herum gedacht: Wer
   Jarvis nach einer Karte fragt, sitzt in aller Regel GERADE BEI JARVIS — die Karte
   wäre also genau dann unsichtbar gewesen, wenn man sie angefordert hat.
   Sie schwebt deshalb über dem Leitstand; z-index 55 liegt über dessen Rahmen. */
body.almajd-full .ki-schicht { display: none !important; }

/* Schließen-Knopf der rahmenlosen Karten (Globus). Er schwebt über der Kugel, weil
   die Karte absichtlich keinen Kasten und keine Kopfzeile hat. */
.ki-schicht .ki-card-bare { position: relative; }
.ki-schicht .ki-bare-x {
  position: absolute; top: 4px; right: 6px; z-index: 2;
  width: 32px; height: 32px; line-height: 1; font-size: 21px;
  border-radius: 50%; cursor: pointer;
  color: #cfe4ff; background: rgba(6, 20, 32, .7);
  border: 1px solid rgba(120, 180, 255, .35);
}
.ki-schicht .ki-bare-x:hover { color: #fff; background: rgba(217, 45, 32, .55); }

/* ---------------------------------------------------------------------------
   Jarvis lebt auf jeder Seite (21.09.2026).
   Der Rahmen hängt am <body> und wird nur einmal angelegt. Auf der Jarvis-Seite
   füllt er den Schirm; überall sonst ist er UNSICHTBAR, aber nicht abgeschaltet —
   `visibility: hidden` statt `display: none`, damit Erkennung und Stimme
   weiterlaufen, während man in der Buchhaltung arbeitet.
   -------------------------------------------------------------------------- */
iframe.jarvis-rahmen {
  position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0;
  background: #0b1020; z-index: 3;
}
body:not(.view-jarvis) iframe.jarvis-rahmen {
  visibility: hidden; pointer-events: none; z-index: -1;
}
/* Die Rückkehr-Leiste liegt ÜBER dem Rahmen. */
body.view-jarvis .jarvis-huelle { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: transparent; }
body.view-jarvis .jarvis-huelle > * { pointer-events: auto; }

/* Das EINE Mikrofon — schwebt über dem Kamera-Knopf, auf jeder Seite außer der
   Jarvis-Seite (dort hat der Leitstand seinen eigenen; beide schalten dasselbe). */
.jarvis-mikro-fab {
  /* GANZ unten rechts (Wunsch: „am besten ganz unten rechts"). Der Kamera-Knopf
     rückt dafür darüber — siehe #scanFab weiter unten. */
  position: fixed; right: 22px; bottom: 22px; width: 64px; height: 64px;
  border-radius: 50%; cursor: pointer; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: #0b1a2e; color: #cfe4ff;
  border: 2px solid rgba(87, 215, 242, .55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.jarvis-mikro-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* AN: grüner Ring, der atmet — man sieht von weitem, dass er zuhört. */
.jarvis-mikro-fab.an {
  border-color: #3FD07F; color: #fff; background: #0e2f24;
  box-shadow: 0 0 0 0 rgba(63, 208, 127, .55);
  animation: jarvisMikroAtmen 1.8s ease-out infinite;
}
@keyframes jarvisMikroAtmen {
  0%   { box-shadow: 0 0 0 0 rgba(63, 208, 127, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(63, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 208, 127, 0); }
}
@media (prefers-reduced-motion: reduce) { .jarvis-mikro-fab.an { animation: none; } }
[dir="rtl"] .jarvis-mikro-fab { right: auto; left: 22px; }
/* Auf der Jarvis-Seite BLEIBT er — es ist das eine Mikrofon; der in der Befehlszeile
   des Leitstands ist dafür weg. Er liegt über dem Rahmen (z-index 1200 > 3). */
body.almajd-full .jarvis-mikro-fab,
body.im-rahmen .jarvis-mikro-fab { display: none !important; }
/* Der Kamera-Knopf rückt über das Mikrofon. */
body:has(.jarvis-mikro-fab) #scanFab { bottom: 100px; }
@media (max-width: 560px) {
  /* Über der Handy-Leiste unten (die ist rund 64 px hoch). */
  .jarvis-mikro-fab { bottom: 84px; right: 14px; }
  body:has(.jarvis-mikro-fab) #scanFab { bottom: 160px; }
  /* Auf der Jarvis-Seite gibt es keine Handy-Leiste — dann wirklich ganz unten,
     aber über der Befehlszeile des Leitstands (86 px). */
  body.view-jarvis .jarvis-mikro-fab { bottom: 96px; }
}

/* ---- Buchungen & DATEV (03.10.2026) ---- */
.bj-wrap { min-width: min(1100px, 92vw); }
.bj-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bj-kr { font-size: 13px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.bj-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.bj-knoepfe .btn { text-decoration: none; }
.bj-summen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.bj-summen > div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: #fff; }
.bj-summen h4 { margin: 0 0 4px; font-size: 13px; }
.bj-tabelle { max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.bj-tbl { width: 100%; font-size: 12.5px; }
.bj-tbl th { position: sticky; top: 0; background: #f4f6f8; z-index: 1; }
.bj-tbl td small.hint { font-size: 10.5px; }
.bj-tbl tr.bj-nur-sb td { background: #fff8e6; }
.bj-tbl tr.bj-offen td { background: #fff1f0; }
.bj-tbl tr.bj-abw td:last-child { font-weight: 600; }
.bj-tbl tr.bj-doppelt td { color: var(--muted); }
.bj-tag { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: #eef1f5; color: #444; white-space: nowrap; }
.bj-tag.sb { background: #fde9c2; color: #7a4b00; }
.bj-sbinfo { color: #2f7a55; white-space: nowrap; }
.bj-sbinfo.abw { color: #b3261e; }
.bj-import { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; }
.bj-konten table { margin-top: 6px; }
.bj-vorschau-kopf { margin: 6px 0; }
.modal.modal-wide { max-width: min(1200px, 96vw); width: auto; }
@media (max-width: 1024px) {
  .bj-wrap { min-width: 0; }
  .bj-summen { grid-template-columns: 1fr; }
  .bj-tabelle { max-height: none; border: none; }
}
.btn-link { background: none; border: none; color: #b3261e; cursor: pointer; font: inherit; padding: 0 2px; }

/* ---- BWA ---- */
.bwa-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 12px; }
.bwa-kachel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.bwa-kachel span { font-size: 11.5px; color: var(--muted); }
.bwa-kachel b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bwa-kachel small { font-size: 11px; color: var(--muted); }
.bwa-kachel.pos b { color: #2f7a55; }
.bwa-kachel.neg b { color: #b3261e; }
.bwa-tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bwa-tbl tr.bwa-summe td { background: #f4f6f8; font-weight: 600; }
.bwa-tbl tr.bwa-ergebnis td { background: #eef5f1; font-weight: 700; border-top: 2px solid #c9d8cf; }
.bwa-tbl tr.bwa-konto td { font-size: 11.5px; color: #555; background: #fcfcfd; }
.bwa-tbl tr.bwa-auf > td:first-child { font-weight: 600; }
@media (max-width: 1024px) { .bwa-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .modal-backdrop { position: static; background: #fff; } .modal { max-width: none; box-shadow: none; } .bj-tabelle { max-height: none !important; overflow: visible; } .modal-actions, .bj-knoepfe { display: none; } }

/* ---- Buchungskonto-Abzeichen ---- */
.konto-badge { display: inline-flex; align-items: center; gap: 2px; font: inherit; font-size: 11px; line-height: 1.2; padding: 1px 6px; border-radius: 4px; border: 1px solid #c9d8cf; background: #eef5f1; color: #1f4d36; cursor: pointer; vertical-align: middle; max-width: 100%; }
.konto-badge b { font-variant-numeric: tabular-nums; }
.konto-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-badge.regel { border-color: #c3cce4; background: #eef1f8; color: #1b2a57; }
.konto-badge.kategorie { border-color: #e2e5ea; background: #f4f5f7; color: #555; }
.konto-badge.leer { border-style: dashed; background: #fff; color: #b3261e; }
.konto-badge:hover { filter: brightness(0.96); }
.konto-cat-sel + .konto-badge { margin-top: 3px; }
.konto-wahl-zeile { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--line-soft, #eee); font-size: 13px; }
.konto-wahl-zeile:hover, .konto-wahl-zeile.an { background: #eef5f1; }

.bj-tag.sev { background: #ececec; color: #666; text-decoration: line-through; text-decoration-color: #b3261e; }
.bj-schalter { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); cursor: pointer; }

.konto-badge.ki { border-color: #d8c6ee; background: #f4eefb; color: #5b2d91; }
.konto-badge.rechnung { border-color: #c9d8cf; background: #eef5f1; color: #1f4d36; cursor: default; }
.konto-ki-hinweis { display: inline-block; background: #f4eefb; border: 1px solid #d8c6ee; color: #5b2d91; border-radius: 8px; padding: 6px 10px; }
.bj-tag.ki { background: #f4eefb; color: #5b2d91; }
/* Darlehensrate: Zins/Tilgung-Teilung statt eines Kontos (Span, kein Knopf), Rückbuchung in Grau-Blau. */
.konto-badge.darlehen { border-color: #cfd9c8; background: #f1f6ec; color: #2f5a1f; cursor: default; white-space: normal; line-height: 1.35; }
.konto-badge.rueckbuchung { border-color: #c8d3dc; background: #eef3f7; color: #2b4a66; }
.bj-tag.darlehen { background: #f1f6ec; color: #2f5a1f; }
/* USt-Voranmeldung: doppelt hochgeladener Beleg — gelistet, aber nicht gezählt */
.konto-table tr.ustva-doppelt td { color: #8a8a8a; background: #f3f3f3; }

/* ---- Postfach „Alle Konten": Sammelordner, Kontobaum und Farbe je Postfach (v455) ---- */
.mail-sammel { display: flex; flex-direction: column; gap: 1px; padding: 4px; margin: 2px 0 2px; border-radius: 12px; background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.mail-konto { --konto: #64748b; display: flex; flex-direction: column; margin: 1px 0; }
.mail-konto-zeile { display: flex; align-items: center; gap: 2px; border-radius: 10px; transition: background .15s; }
.mail-konto-zeile:hover { background: color-mix(in srgb, var(--konto) 9%, transparent); }
.mail-konto.offen > .mail-konto-zeile { background: color-mix(in srgb, var(--konto) 7%, transparent); }
.mail-konto-farbe { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 4px 0 9px; padding: 0; border-radius: 50%; border: 2px solid var(--card, #fff); background: var(--konto); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--konto) 60%, transparent); cursor: pointer; transition: transform .15s; }
.mail-konto-farbe:hover { transform: scale(1.3); }
.mail-konto-kopf { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 8px 8px 8px 4px; border: none; background: none; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.mail-konto-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mail-konto-name b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-konto-name small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-konto .mail-navcount { background: var(--konto); }
.mail-konto-pfeil { flex: 0 0 auto; width: 14px; text-align: center; color: var(--muted); font-size: 16px; line-height: 1; transition: transform .2s ease, color .2s; }
.mail-konto.offen .mail-konto-pfeil { transform: rotate(90deg); color: var(--konto); }
.mail-konto-ordner { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 7px 15px; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--konto) 45%, transparent); animation: mailKontoAuf .18s ease; }
@keyframes mailKontoAuf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mail-konto-ordner { animation: none; } .mail-konto-pfeil { transition: none; } }
.mail-konto-ordner .mail-navitem { padding: 5px 8px; font-size: 12px; }
.mail-konto-ordner .mail-navitem:hover { background: color-mix(in srgb, var(--konto) 10%, transparent); }
.mail-konto-ordner .mail-navitem.active { background: color-mix(in srgb, var(--konto) 17%, transparent); color: var(--ink); font-weight: 700; }
.mail-konto-ordner .mail-navitem.active .ico { color: var(--konto); }
/* Konto-Kennzeichen an der E-Mail in der Liste — in der Farbe des Postfachs */
.mail-acc-tag.mit-farbe { background: color-mix(in srgb, var(--konto) 14%, transparent); color: color-mix(in srgb, var(--konto) 78%, #000); }
.mail-acc-tag.mit-farbe::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--konto); vertical-align: 1px; }
.mail-row2.mit-konto:not(.sel) { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--konto) 70%, transparent); }
html.dark .mail-acc-tag.mit-farbe { color: color-mix(in srgb, var(--konto) 70%, #fff); }
html.dark .mail-konto-kopf { color: #cdd7e1; }
html.dark .mail-konto-farbe { border-color: #16202c; }
/* Dialog „Farben der Postfächer" */
.konto-farben { display: flex; flex-direction: column; gap: 10px; }
.konto-farben-zeile { --konto: #64748b; display: flex; flex-direction: column; gap: 9px; padding: 11px 13px; border: 1px solid var(--line); border-left: 4px solid var(--konto); border-radius: 12px; }
.konto-farben-kopf { display: flex; align-items: center; gap: 10px; }
.konto-farben-kopf b { display: block; font-size: 13.5px; }
.konto-farben-kopf small { display: block; font-size: 11.5px; color: var(--muted); }
.konto-farben-punkt { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px var(--card, #fff), 0 0 0 4px var(--line); }
.konto-farben-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.konto-farben-wahl .mail-colorswatches { margin: 0; }
.konto-farben-eigenlbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.konto-farben-eigen { width: 34px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }

/* PC: Ordnerleiste fest als linke Spalte (v456) — vorher ging sie auch am großen Bildschirm nur
   über „☰ Ordner" als Schublade auf. Am Handy und in schmalen Fenstern bleibt die Schublade,
   dort fehlt der Platz für drei Spalten. Die Schublade steht im Code als LETZTES Kind der Shell,
   deshalb `order: -1`. */
@media (min-width: 1200px) and (pointer: fine) {
  .mail-shell .mail-drawer { position: relative; order: -1; flex: 0 0 252px; width: auto; height: 100%; transform: none; opacity: 1; visibility: visible; transition: none; box-shadow: none; z-index: auto; }
  .mail-shell .mail-drawer-backdrop { display: none; }
  .mail-shell .mail-drawer-close { display: none; }
  .mail-toolbar .mail-foldertoggle { display: none; }
}
/* v458: Pfeil ist ein eigener Knopf (Konto-Klick öffnet den Posteingang), gewähltes Konto hervorgehoben */
button.mail-konto-pfeil { border: none; background: none; cursor: pointer; padding: 6px 8px 6px 4px; font: inherit; font-size: 17px; width: auto; border-radius: 7px; }
button.mail-konto-pfeil:hover { color: var(--konto); background: color-mix(in srgb, var(--konto) 12%, transparent); }
.mail-konto.gewaehlt > .mail-konto-zeile { background: color-mix(in srgb, var(--konto) 15%, transparent); box-shadow: inset 3px 0 0 var(--konto); }
.mail-konto.gewaehlt .mail-konto-name b { color: color-mix(in srgb, var(--konto) 75%, #000); }
html.dark .mail-konto.gewaehlt .mail-konto-name b { color: color-mix(in srgb, var(--konto) 65%, #fff); }

/* ---- v461: Kopfzeile am PC einheitlich zum neuen Logo ----
   Die Handy-Knöpfe (.h-kopf-knopf: Suche, Anfragen, Postfach) standen am PC zusätzlich und
   UNGESTALTET in der Leiste (hellgraue Browser-Kästen). Lupe und Anfragen gibt es am PC schon —
   die beiden sind dort ausgeblendet; das Postfach bleibt (oben gibt es sonst keinen Knopf dafür).
   Alle Knöpfe: durchscheinend auf Nachtblau, beim Darüberfahren Gold, Zähler im Logo-Rot. */
@media (min-width: 1025px) and (pointer: fine), (min-width: 1101px), (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) {
  header.topbar .h-kopf-knopf:not(.h-kopf-anfragen):not([aria-label="Suchen"]),
  header.topbar .topbar-search {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 36px; height: 36px; margin: 0 3px; padding: 0; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    color: #eef1f7; --ico: #eef1f7; transition: background .15s, border-color .15s, color .15s;
  }
  header.topbar .h-kopf-knopf svg { width: 18px; height: 18px; }
  header.topbar .h-kopf-anfragen, header.topbar .h-kopf-knopf[aria-label="Suchen"] { display: none; }
  header.topbar .h-kopf-knopf:hover, header.topbar .topbar-search:hover,
  header.topbar .acct-toggle:hover {
    background: rgba(224, 168, 63, .16); border-color: var(--brand); color: #f2c46b; --ico: #f2c46b;
  }
  header.topbar .topbar-winbtn { border-radius: 8px; transition: color .15s, background .15s; }
  header.topbar .topbar-winbtn:hover { color: #f2c46b; --ico: #f2c46b; background: rgba(255, 255, 255, .06); opacity: 1; }
  header.topbar .h-kopf-zahl { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--logo-red, #c62a22); color: #fff; font-size: 10.5px; font-weight: 700;
    line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--topbar-bg, #1f2a40); }
  header.topbar .h-kopf-zahl[hidden] { display: none; }
}
/* Anfragen: grüne „Neu"-Fläche passte nicht mehr — jetzt Gold wie die Knöpfe, Zahl im Logo-Rot. */
.topbar-anfragen.hat-neue { background: rgba(224, 168, 63, .16); border-color: var(--brand); color: #f2c46b; --ico: #f2c46b; border-radius: 10px; }
.anfr-zahl { background: var(--logo-red, #c62a22); }

/* v461: Angeklickter Menüpunkt leuchtet GOLD (Wunsch: „das soll gold sein, wenn ich drauf klicke").
   Vorher bekam er die nachtblaue Schrift für Gold-Flächen, stand aber auf dem dunklen Menü —
   dunkel auf dunkel, kaum lesbar. */
nav.side button.active,
nav.side button.nav-gruppe.active {
  background: rgba(224, 168, 63, .14); color: #f2c46b; --ico: #f2c46b;
  box-shadow: inset 3px 0 0 var(--brand); font-weight: 700;
}
nav.side button.active > span, nav.side button.active .nav-caret { color: #f2c46b; }
#nav .nav-unterpunkt.active { color: #f2c46b; }
#nav .nav-unterpunkt.active::before { background: var(--brand); border-color: var(--brand); }
nav.side button.nav-subitem.active { background: rgba(224, 168, 63, .14); color: #f2c46b; }

/* v461: Spruch in der Kopfzeile in Gold (Wunsch). Beim Darüberfahren heller statt dunkel —
   var(--ink) wäre auf dem Nachtblau unsichtbar. */
header.topbar .topbar-spruch-text { color: #e0b456; }
header.topbar .topbar-spruch:hover .topbar-spruch-text { color: #f5d27f; }

/* v461: Kopfzeilen-Knöpfe einheitlich und GOLDEN (Wunsch). Vorher bunte Emojis (🌐 💬) und
   lose Zeichen (🗔 ↗) ohne Rahmen — jetzt gleich große Kästen mit Linien-Symbolen in Gold. */
@media (min-width: 1025px) and (pointer: fine), (min-width: 1101px), (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) {
  header.topbar .topbar-winbtn,
  header.topbar .h-kopf-knopf:not(.h-kopf-anfragen):not([aria-label="Suchen"]),
  header.topbar .topbar-search {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; min-width: 36px; padding: 0 9px; margin: 0 2px; border-radius: 10px; opacity: 1;
    background: rgba(224, 168, 63, .08); border: 1px solid rgba(224, 168, 63, .28);
    color: #e0b456; --ico: #e0b456; font-size: 13.5px; line-height: 1;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
  }
  header.topbar .topbar-winbtn svg, header.topbar .topbar-search svg, header.topbar .h-kopf-knopf svg { width: 18px; height: 18px; }
  header.topbar .topbar-winbtn:hover,
  header.topbar .h-kopf-knopf:hover,
  header.topbar .topbar-search:hover {
    background: rgba(224, 168, 63, .2); border-color: var(--brand); color: #f5d27f; --ico: #f5d27f;
  }
  header.topbar .topbar-winbtn:active, header.topbar .topbar-search:active, header.topbar .h-kopf-knopf:active { transform: scale(.95); }
  header.topbar .topbar-anfragen { padding: 0 11px; font-weight: 600; }
  header.topbar .topbar-anfragen.hat-neue { background: rgba(224, 168, 63, .2); border-color: var(--brand); }
}

/* v461: Angeklicktes Menü-Symbol wird GOLDEN wie die „F"-Kachel im Logo, und ein Glanzstreifen
   läuft immer wieder darüber, solange die Seite offen ist (Wunsch, ausgewählt aus vier Varianten).
   Die Bereichsfarbe steht als Inline-Stil am Feld (navIcon) — deshalb !important. */
@keyframes navChipGlanz {
  0% { transform: translateX(-140%) skewX(-20deg); }
  55%, 100% { transform: translateX(240%) skewX(-20deg); }
}
nav.side button.active .nav-chip,
nav.side button.nav-gruppe.active .nav-chip {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f5d27f 0%, #c0801e 100%) !important;
  color: #1b2538 !important; --ico: #1b2538 !important;
  box-shadow: 0 2px 8px rgba(224, 168, 63, .35);
}
nav.side button.active .nav-chip::after,
nav.side button.nav-gruppe.active .nav-chip::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
  animation: navChipGlanz 2.4s ease-in-out infinite; pointer-events: none;
}
nav.side button:active .nav-chip { transform: scale(.9); transition: transform .08s; }
@media (prefers-reduced-motion: reduce) {
  nav.side button.active .nav-chip::after, nav.side button.nav-gruppe.active .nav-chip::after { animation: none; display: none; }
}

/* ---- v461: Falax-Bau-Figur (nur beim Unternehmen Falax-Bau) ---- */
.falax-figur { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* 1) Startseiten-Banner: rechts, steht unten auf der Kante; Text bekommt Platz */
/* Groß, Gesicht in der Mitte (Wunsch: noch größer): Das Gesicht liegt bei ~11 % der Bildhöhe — bei
   340 % Höhe und top 13 % steht es mittig im Banner; Oberkörper füllt den Rest, Beine laufen unten raus. */
.home-banner.mit-figur .hb-figur { position: absolute; right: 90px; top: 13%; bottom: auto; height: 340%; max-height: none; z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.home-banner.mit-figur .home-banner-fallback { padding-right: 420px; }
.home-banner.mit-figur .home-banner-tools { z-index: 2; }
@media (max-width: 900px) { .home-banner.mit-figur .hb-figur { right: 0; top: 13%; height: 340%; } .home-banner.mit-figur .home-banner-fallback { padding-right: 130px; } }
/* 2) Anmeldeseite: links neben dem Fenster; am Handy klein darüber; beim Supermarkt-Bereich weg */
.login-figur { height: min(560px, 78vh); margin-right: 18px; align-self: flex-end; margin-bottom: 4vh;
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .22)); pointer-events: none; user-select: none; }
.login-wrap.ziel-supermarkt .login-figur { display: none; }
@media (max-width: 820px) {
  .login-wrap { flex-direction: column; }
  .login-figur { height: 150px; margin: 0 0 -6px; align-self: center; }
}
/* 3) Leere Seiten */
.figur-leer { display: flex; align-items: center; gap: 14px; padding: 10px 4px 14px; text-align: left; }
.figur-leer-bild { height: 96px; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .15)); }
.figur-leer-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--muted); }
.figur-leer-text b { color: var(--ink); font-size: 14.5px; }
.mail-empty .figur-leer { flex-direction: column; text-align: center; }
.mail-empty .figur-leer-bild { height: 130px; }
/* 4) Begrüßung am Morgen */
.ds-head.mit-figur { position: relative; padding-right: 96px; min-height: 92px; }
.ds-head.mit-figur .ds-figur { position: absolute; right: 0; top: -14px; height: 118px; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .18)); }

/* v461: Buchhaltung — Aktionen in drei Gruppen, alle Knöpfe einheitlich (weiß, goldenes Symbol). */
.buch-aktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 4px; }
.buch-gruppe { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 12px; background: var(--card); }
.buch-gruppe-titel { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 2px 8px; }
.buch-gruppe-knoepfe { display: flex; flex-direction: column; gap: 6px; }
.buch-akt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  text-align: left; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, transform .08s;
  --ico: var(--brand-text); }
.buch-akt .ico, .buch-akt svg { color: var(--brand-text); flex: 0 0 auto; }
.buch-akt:hover { border-color: var(--brand); background: var(--brand-soft); }
.buch-akt:active { transform: scale(.98); }
.buch-akt:disabled { opacity: .6; cursor: wait; }
@media (max-width: 900px) { .buch-aktionen { grid-template-columns: 1fr; } }

/* ---- v461: Buchhaltungs-Seite sauberer (Wunsch: „bitte die ganze Seite sauberer") ---- */
/* Monatsbilanz: Linien-Symbole in einer ruhigen Farbe, Saldo abgesetzt, Abgleich als ein Kasten */
.acc-bilanz .bilanz-titel { display: flex; align-items: center; gap: 8px; margin: 0; --ico: var(--brand-text); }
.acc-bilanz .bilanz-titel .ico { color: var(--brand-text); }
.acc-bilanz .bilanz-lbl { display: inline-flex; align-items: center; gap: 9px; --ico: var(--muted); }
.acc-bilanz .bilanz-lbl .ico { color: var(--muted); }
.acc-bilanz .bilanz-row.bilanz-saldo { margin-top: 2px; padding: 9px 10px; border: 0; border-radius: 10px; background: var(--bg); }
.acc-bilanz .bilanz-row.bilanz-saldo .bilanz-lbl { font-weight: 700; padding-left: 24px; }
.acc-bilanz .bilanz-row b.pos { color: #1a8f4c; }
.acc-bilanz .bilanz-abgleich { margin-top: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid; }
.acc-bilanz .bilanz-abgleich.warn { background: #fff8eb; border-color: #f3dcae; }
.acc-bilanz .bilanz-abgleich.ok { background: #eef8f1; border-color: #cfe9d8; }
.acc-bilanz .bilanz-check.ok { color: #1a7a43; }
.acc-bilanz .bilanz-check.warn { color: #9a5b00; }
/* Belege in der Liste: EINE Zeile — links Name/Datum/Betrag, rechts die Symbole, ganz rechts klein
   der Hochlader. Vorher drei Zeilen je Beleg (Titel · Symbolreihe · breiter „admin"-Balken). */
@media (min-width: 701px) {
  .firm-list .firm-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; row-gap: 4px; padding: 8px 6px; }
  .firm-list .firm-doc > *:not(.firm-doc-top):not(.firm-doc-ctrls):not(.by-badge) { grid-column: 1 / -1; }
  .firm-list .firm-doc .firm-doc-ctrls { flex-wrap: nowrap; gap: 2px; opacity: .55; transition: opacity .15s; }
  .firm-list .firm-doc:hover .firm-doc-ctrls, .firm-list .firm-doc:focus-within .firm-doc-ctrls { opacity: 1; }
  .firm-list .firm-doc .by-badge { margin: 0; padding: 0; background: none; color: var(--muted); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
}
.firm-doc .doc-mini { --ico: var(--muted); }
.firm-doc .doc-mini:hover { --ico: var(--brand-text); }
.firm-doc .doc-mini.del:hover { --ico: var(--warn-strong); }
.firm-list .firm-doc[hidden] { display: none !important; }
.firm-list-mehr { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--bg); color: var(--brand-text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.firm-list-mehr:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ---- v461: Buchhaltung — Kacheln & Reiter ---- */
.bilanz-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
.bilanz-kachel { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); text-align: left; font: inherit; color: var(--ink); }
button.bilanz-kachel { cursor: pointer; transition: border-color .15s, background .15s; }
button.bilanz-kachel:hover { border-color: var(--brand); background: var(--brand-soft); }
.bilanz-kachel-kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); --ico: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bilanz-kachel b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bilanz-kachel small { font-size: 12px; color: var(--muted); }
.bilanz-kachel.pos b { color: #1a8f4c; }
.bilanz-kachel.neg b { color: var(--warn-strong); }
.bilanz-kachel.offen { border-color: #f3dcae; background: #fff8eb; }
.bilanz-kachel.offen b { color: #9a5b00; }
.bilanz-kachel.ok b { color: #1a8f4c; }
.bilanz-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 8px;
  border-radius: 10px; background: #fff8eb; border: 1px solid #f3dcae; color: #9a5b00; font-size: 13px; }
.bilanz-details > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--brand-text); padding: 4px 0; list-style: none; }
.bilanz-details > summary::before { content: '▸ '; }
.bilanz-details[open] > summary::before { content: '▾ '; }
.bilanz-details[open] > summary { margin-bottom: 6px; }
.acc-reiter-karte { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 10px !important; }
.acc-reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.acc-reiter-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--muted); --ico: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.acc-reiter-knopf:hover { background: var(--bg); color: var(--ink); }
.acc-reiter-knopf.aktiv { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); --ico: var(--brand-text); }
.acc-reiter-zahl { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--navy, #1f2a40); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.acc-reiter-zahl.leer { background: var(--line); color: var(--muted); }
.acc-reiter-knopf.aktiv .acc-reiter-zahl { background: var(--brand); color: var(--brand-ink); }
.acc-reiter-rechts { display: flex; align-items: flex-end; gap: 12px; }
.acc-reiter-rechts .field { margin: 0; }
.acc-filter { padding: 8px 12px; border: 1px dashed #e0b456; border-radius: 10px; background: #fff8eb; color: #9a5b00; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.acc-filter.an { border-style: solid; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
@media (max-width: 900px) {
  .bilanz-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-reiter { overflow-x: auto; flex-wrap: nowrap; }
}

/* ---- v461: Monatsleiste, doppelte Belege, KI-Knopf in „Offen" ---- */
.acc-monatsleiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.acc-jahr { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.acc-jahr b { min-width: 46px; text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.acc-jahr-pfeil { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--brand-text); font-size: 18px; font-weight: 700; cursor: pointer; }
.acc-jahr-pfeil:hover { background: var(--brand-soft); }
.acc-monate { display: flex; gap: 4px; flex-wrap: wrap; }
.acc-monat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.acc-monat:hover { border-color: var(--brand); }
.acc-monat.aktiv { background: var(--navy, #1f2a40); border-color: var(--navy, #1f2a40); color: #fff; }
.acc-monat-punkt { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #c3c9d4; background: transparent; flex: 0 0 auto; }
.acc-monat.st-fertig .acc-monat-punkt { background: #1a8f4c; border-color: #1a8f4c; }
.acc-monat.st-offen .acc-monat-punkt { background: linear-gradient(90deg, #e0a83f 50%, transparent 50%); border-color: #e0a83f; }
.acc-monat.st-leer .acc-monat-punkt { border-color: #c3c9d4; }
.acc-legende { display: inline-flex; gap: 10px; font-size: 11.5px; color: var(--muted); }
.acc-legende span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; border: 2px solid #c3c9d4; }
.acc-legende .fertig::before { background: #1a8f4c; border-color: #1a8f4c; }
.acc-legende .offen::before { background: linear-gradient(90deg, #e0a83f 50%, transparent 50%); border-color: #e0a83f; }
.beleg-doppelt { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: #fdecea; color: #b42318; border: 1px solid #f5c2bc; font-size: 11.5px; font-weight: 700; }
.beleg-pruefen { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #fff4e0; color: #8a5300; border: 1px solid #f5d29a; font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1.6; }
.beleg-pruefen:hover { background: #ffe9c2; }
.acc-filter.doppelt { border-color: #f5c2bc; background: #fdecea; color: #b42318; }
.acc-filter.doppelt.an { background: #c62a22; border-color: #c62a22; color: #fff; }
.bilanz-kachel-link { align-self: flex-start; padding: 0; border: 0; background: none; color: #9a5b00; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.bilanz-kachel-ki { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 5px 10px; border: 0; border-radius: 8px;
  background: var(--brand); color: var(--brand-ink); --ico: var(--brand-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bilanz-kachel-ki:hover { background: var(--brand-dark); }
.bilanz-kachel-ki:disabled { opacity: .7; cursor: wait; }
@media (max-width: 900px) { .acc-monate { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .acc-legende { display: none; } }

/* ---- v461: Buchhaltung — schlanker Kopf, „Weitere"-Menü, dünnes Ablagefeld, Betragsspalte ---- */
.buch-leiste { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.buch-leiste > .buch-akt { width: auto; }
.buch-weitere { position: relative; }
.buch-weitere > summary { display: flex; align-items: center; gap: 8px; height: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; --ico: var(--brand-text); }
.buch-weitere > summary::-webkit-details-marker { display: none; }
.buch-weitere > summary:hover, .buch-weitere[open] > summary { border-color: var(--brand); background: var(--brand-soft); }
.buch-weitere-pfeil { color: var(--muted); font-size: 12px; }
.buch-weitere-menue { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 290px; display: flex; flex-direction: column; gap: 5px;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 14px 34px rgba(15, 23, 42, .16); }
.buch-weitere-menue .buch-gruppe-titel { margin: 4px 2px 2px; }
.dropzone.dropzone-schmal { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-width: 1.5px; font-size: 13.5px; text-align: left; --ico: var(--brand-text); }
body.acc-ziehen main.content { outline: 3px dashed var(--brand); outline-offset: -8px; border-radius: 14px; background: color-mix(in srgb, var(--brand-soft) 45%, var(--canvas, #f3f4f7)); }
@media (min-width: 701px) {
  .firm-list.mit-betrag .firm-doc { grid-template-columns: minmax(0, 1fr) 110px auto auto; }
  .firm-list.mit-betrag .firm-doc > .firm-doc-top { grid-column: 1; grid-row: 1; }
  .firm-list.mit-betrag .firm-doc > .firm-doc-betrag { grid-column: 2 !important; grid-row: 1; }
  .firm-list.mit-betrag .firm-doc > .firm-doc-ctrls { grid-column: 3; grid-row: 1; }
  .firm-list.mit-betrag .firm-doc > .by-badge { grid-column: 4; grid-row: 1; }
  .firm-list.mit-betrag .beleg-preis-teil { display: none; }
}
.firm-doc-betrag { text-align: right; font-weight: 700; font-size: 14.5px; color: #1a7a43; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 700px) { .firm-doc-betrag { display: none; } }
/* v461: Buchhaltung am Handy — Knöpfe zu zweit nebeneinander, „Weitere"-Menü bleibt im Bild */
@media (max-width: 700px) {
  .buch-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .buch-leiste > .buch-akt, .buch-leiste > .buch-weitere > summary { padding: 8px 10px; font-size: 13px; gap: 7px; }
  .buch-weitere-menue { left: auto; right: 0; width: min(290px, calc(100vw - 40px)); }
  .acc-monatsleiste { gap: 8px; }
  .acc-reiter-karte { flex-direction: column; align-items: stretch; }
  .acc-reiter-knopf { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
  .acc-reiter-rechts { flex-wrap: wrap; align-items: center; }
  .bilanz-kachel b { font-size: 17px; }
}
/* v461: Knöpfe und Reiter in schmalen Fenstern als gleichmäßiges 2×2-Raster (Wunsch: „ist unsauber") —
   vorher mal einer, mal zwei Knöpfe je Zeile in unterschiedlicher Breite, Reiter seitlich abgeschnitten. */
@media (max-width: 900px) {
  .buch-leiste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .buch-leiste > .buch-akt, .buch-leiste > .buch-weitere > summary {
    width: 100%; min-height: 50px; justify-content: center; text-align: center; padding: 8px 10px; font-size: 13.5px; line-height: 1.25; }
  .buch-leiste > .buch-weitere { width: 100%; }
  .acc-reiter { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
  .acc-reiter-knopf { justify-content: space-between; border-color: var(--line); white-space: nowrap; }
}
.acc-reiter-knopf .kurz { display: none; }
@media (max-width: 900px) {
  .acc-reiter-knopf .lang { display: none; }
  .acc-reiter-knopf .kurz { display: inline; margin-right: auto; }
  .acc-reiter-knopf { min-width: 0; }
}
@media (max-width: 700px) {
  /* Symbol oben, Text darunter — kein Umbruch mitten im Wort („USt-/Voranmeldung") */
  .buch-leiste > .buch-akt, .buch-leiste > .buch-weitere > summary { flex-direction: column; gap: 4px; min-height: 64px; font-size: 12.5px; hyphens: none; }
  .buch-leiste > .buch-weitere > summary .buch-weitere-pfeil { display: none; }
}
/* v461: Überschrift der Buchhaltung kleiner */
h2.buch-titel { display: flex; flex-direction: column; gap: 1px; margin: 0 0 12px; font-size: 21px; line-height: 1.2; }
h2.buch-titel .buch-titel-firma { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
@media (max-width: 700px) { h2.buch-titel { font-size: 18px; } h2.buch-titel .buch-titel-firma { font-size: 12px; } }
.cat-sum { white-space: nowrap; }

/* ---- v462: Rechnungsseite nach dem Schema ---- */
.rech-kopfleiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.rech-kopf-rechts { display: flex; align-items: stretch; gap: 8px; }
.buch-weitere.aktiv > summary { border-color: var(--brand); background: var(--brand-soft); }
.buch-weitere-menue .buch-akt.aktiv { border-color: var(--brand); background: var(--brand-soft); }
.rech-kopf-rechts .buch-weitere-menue { left: auto; right: 0; }
.rech-kacheln { margin-bottom: 12px; }
.bilanz-kachel.neg-kachel { border-color: #f5c2bc; background: #fdecea; }
.bilanz-kachel.neg-kachel b { color: var(--warn-strong); }
.rech-status-leiste { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 4px 0 10px; }
.rech-status { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 13px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.rech-status:hover { color: var(--ink); }
.rech-status.aktiv { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
@media (max-width: 900px) {
  .rech-kopfleiste { flex-direction: column; align-items: stretch; }
  .rech-kopfleiste .acc-reiter { grid-template-columns: 1fr 1fr 1fr; }
  .rech-kopf-rechts { display: grid; grid-template-columns: 1fr 1fr; }
  .rech-kopf-rechts .rech-toolbar-actions { display: contents; }
  .rech-status-leiste { flex-wrap: nowrap; overflow-x: auto; }
  .rech-status { white-space: nowrap; }
}

/* v462: Rechnungszeile — vier Symbole + „⋯"-Menü mit Text */
.rech-mehr-knopf { background: var(--card); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; padding: 3px 9px; font-size: 16px; font-weight: 700; line-height: 1; color: var(--muted); }
.rech-mehr-knopf:hover { border-color: var(--brand); color: var(--brand-text); }
.rech-mehr-menue { position: fixed; z-index: 90; min-width: 270px; max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 38px rgba(15, 23, 42, .2); }
.rech-mehr-punkt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--ink); text-align: left; cursor: pointer; --ico: var(--muted); }
.rech-mehr-punkt:hover { background: var(--brand-soft); --ico: var(--brand-text); }
.rech-mehr-punkt[title^="Löschen"], .rech-mehr-punkt[title^="Stornorechnung"] { color: var(--warn-strong); --ico: var(--warn-strong); }
/* v462: Rechnungen — Titelzeile mit Knöpfen rechts, „Finanzen" als Reiter */
.rech-titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rech-titelzeile .rech-toolbar-actions { display: flex; gap: 8px; }
.rech-kopfleiste { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.acc-reiter .buch-weitere > summary { padding: 9px 13px; border-color: transparent; background: none; color: var(--muted); --ico: var(--muted); }
.acc-reiter .buch-weitere > summary:hover { background: var(--bg); color: var(--ink); }
.acc-reiter .buch-weitere.aktiv > summary { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); --ico: var(--brand-text); }
table.data th { white-space: nowrap; }
@media (max-width: 900px) { .rech-titelzeile .rech-toolbar-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .rech-kopfleiste .acc-reiter-knopf { padding: 8px 8px; gap: 6px; font-size: 12.5px; }
  .rech-kopfleiste .acc-reiter-knopf svg { width: 14px; height: 14px; }
  .rech-kopfleiste .acc-reiter .buch-weitere { grid-column: 1 / -1; }
  .rech-kopfleiste .acc-reiter .buch-weitere > summary { justify-content: center; border-color: var(--line); }
}

/* ---- v462: Rechnungen am Handy — jede Zeile wird eine kompakte Karte ---- */
@media (max-width: 700px) {
  table.rech-tabelle, table.rech-tabelle tbody { display: block; width: 100%; }
  table.rech-tabelle thead { display: none; }
  table.rech-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kunde betrag" "nr status" "akt akt";
    gap: 3px 10px; padding: 11px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  table.rech-tabelle td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; }
  table.rech-tabelle td.z-kunde { grid-area: kunde; min-width: 0; }
  table.rech-tabelle td.z-kunde > div:last-child { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.rech-tabelle td.z-betrag { grid-area: betrag; text-align: right !important; font-size: 15px; }
  table.rech-tabelle td.z-nr { grid-area: nr; font-size: 12.5px; }
  table.rech-tabelle td.z-nr::after { content: attr(data-datum); }
  table.rech-tabelle td.z-status { grid-area: status; justify-self: end; font-size: 12.5px; }
  table.rech-tabelle td.z-datum, table.rech-tabelle td.z-offen { display: none; }
  table.rech-tabelle td.z-akt { grid-area: akt; margin-top: 6px !important; padding-top: 8px !important; border-top: 1px solid var(--line) !important; }
  table.rech-tabelle td.z-akt > div { justify-content: flex-start !important; gap: 6px !important; }
  table.rech-tabelle td.z-akt button { padding: 7px 11px !important; }
  /* Kacheln kompakter, „Finanzen"-Menü klappt im Fluss auf statt über den Rand */
  .rech-kacheln { gap: 8px; }
  .rech-kacheln .bilanz-kachel { padding: 9px 11px; }
  .rech-kacheln .bilanz-kachel b { font-size: 16px; }
  .rech-kopfleiste .buch-weitere-menue { position: static; width: auto; margin-top: 6px; box-shadow: none; }
}

/* ---- v462: Rechnungstabelle übersichtlicher (Wunsch: „das übersichtlicher bitte") ---- */
table.rech-tabelle td { vertical-align: middle; }
table.rech-tabelle td.z-kunde > div:last-child { max-width: 440px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rech-tabelle tbody tr:not(.rech-monat):hover { background: var(--bg); }
table.rech-tabelle tr.rech-monat td { padding: 14px 6px 6px !important; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); background: none; border-bottom: 1px solid var(--line); cursor: default; }
table.rech-tabelle td.z-offen { color: #b9c0cc; }
table.rech-tabelle td.z-offen.offen { color: #9a5b00; font-weight: 700; }
table.rech-tabelle td.z-akt button { background: transparent !important; border-color: transparent !important; color: var(--muted) !important; --ico: var(--muted); }
table.rech-tabelle tr:hover td.z-akt button { border-color: var(--line) !important; }
table.rech-tabelle td.z-akt button:hover { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--brand-text) !important; --ico: var(--brand-text); }
@media (max-width: 700px) {
  table.rech-tabelle tr.rech-monat { display: block; border: 0; background: none; padding: 10px 2px 4px; margin: 0; }
  table.rech-tabelle tr.rech-monat td { display: block; padding: 0 !important; border: 0 !important; }
  table.rech-tabelle td.z-kunde > div:last-child { max-width: none; }
}

/* ---- v462: Offene Rechnungen / Umsatzsteuer nach dem Schema ---- */
.bilanz-kachel.gewaehlt { border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-soft); }
button.bilanz-kachel { font: inherit; text-align: left; cursor: pointer; }
button.bilanz-kachel:hover { border-color: var(--brand); }
.trk-kopfleiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; border-bottom: 1px solid var(--line); }
.trk-kopfleiste .rech-status-leiste { border-bottom: 0; margin: 0; }
.trk-kopfleiste > .field { margin: 0 0 6px; }
.trk-reiter-zahl { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center; }
.rech-status.aktiv .trk-reiter-zahl { background: var(--brand-soft); color: var(--brand-text); }
.rech-status.warn .trk-reiter-zahl { background: #fde0e8; color: #b01545; }
.trk-werkzeug { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.trk-werkzeug .firm-filter-sel { flex: 0 0 auto; }
.trk-zeitraum > summary { padding: 7px 11px; font-size: 13.5px; }
.trk-zeitraum.an > summary { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); --ico: var(--brand-text); font-weight: 700; }
.trk-zeitraum-menue { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; min-width: 280px; padding: 12px; }
.trk-zeitraum-menue label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.trk-zeitraum-menue > button { grid-column: 1 / -1; }
table.trk-tabelle td.z-kunde .trk-titel { cursor: pointer; }
table.trk-tabelle td.z-kunde .trk-titel:hover { color: var(--brand-text); text-decoration: underline; }
table.trk-tabelle small.trk-tage { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
table.trk-tabelle td.trk-spaet { color: #b01545 !important; font-weight: 600; }
table.trk-tabelle td.trk-spaet small.trk-tage { color: #b01545; }
table.trk-tabelle tr.trk-erledigt td.z-kunde > div:first-child, table.trk-tabelle tr.trk-erledigt td.z-betrag { color: #6b7385 !important; font-weight: 600 !important; }
table.trk-tabelle td.z-akt .trk-bezahlt-knopf:hover { background: #d8f5e3 !important; border-color: #1a8f4c !important; --ico: #156c3b; }
.rech-mehr-punkt.gefahr { color: var(--warn-strong); --ico: var(--warn-strong); }
@media (max-width: 700px) {
  .trk-kopfleiste { flex-direction: column; align-items: stretch; border-bottom: 0; }
  .trk-kopfleiste .rech-status-leiste { flex-wrap: nowrap; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .trk-kopfleiste .rech-status { flex: 0 0 auto; padding: 8px 10px; }
  .trk-werkzeug .rech-suchbox { flex: 1 1 100%; }
  .trk-zeitraum .buch-weitere-menue { position: static; width: auto; margin-top: 6px; box-shadow: none; }
  table.trk-tabelle td.z-nr small.trk-tage { display: inline; margin-left: 6px; }
}
.trk-werkzeug select.firm-filter-sel { width: auto; flex: 0 0 auto; }
.trk-werkzeug > select.firm-filter-sel { padding: 7px 10px; font-size: 13.5px; }
.trk-zeitraum-menue .firm-filter-sel { padding: 7px 10px; font-size: 13.5px; max-width: none; }
/* Darstellung sitzt in der Werkzeugzeile — ohne Überschrift, ganz rechts */
.trk-werkzeug > .field { margin: 0 0 0 auto; }
.trk-werkzeug > .field > label { display: none; }
@media (max-width: 700px) {
  .trk-werkzeug .docview-lbl { display: none; }
  table.trk-tabelle td.z-kunde > div:first-child { flex-wrap: nowrap !important; min-width: 0; overflow: hidden; }
  table.trk-tabelle td.z-kunde > div:first-child > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
  table.trk-tabelle td.z-akt { margin-top: 4px !important; padding-top: 5px !important; }
  table.trk-tabelle td.z-akt button { padding: 5px 12px !important; }
  table.trk-tabelle tr { padding: 10px 12px 6px; }
}

/* ---- v462: Kunden nach dem Schema ---- */
.trk-werkzeug > .docview-switch { margin-left: auto; }
.kan-col { background: #f6f7fa; border-color: var(--line); border-top: 3px solid var(--kan-farbe, #94a3b8); }
.kan-head { background: none !important; color: var(--ink) !important; justify-content: flex-start; gap: 8px; padding: 9px 11px 7px; font-size: 13px; }
.kan-head .kan-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--kan-farbe, #94a3b8); flex: 0 0 auto; }
.kan-head .kan-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kan-head .kan-count { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-weight: 700; }
.kan-card { border-color: #e4e7ee; }
.kan-card .cust-name { font-weight: 700; color: var(--ink); }
.kan-statussel { margin-top: 7px; padding: 4px 8px; border-color: transparent; background: #f3f4f7; color: var(--muted); font-size: 12px; }
.kan-card:hover .kan-statussel { border-color: var(--line); color: var(--ink); }
@media (max-width: 700px) {
  .trk-werkzeug > .docview-switch .docview-lbl { display: none; }
}

.trk-werkzeug > .docview-switch.kompakt { margin-left: auto; }
.trk-werkzeug > .hint { margin: 0; white-space: nowrap; }

/* ---- v462: Kundenakte ---- */
.akte-zurueck { background: none; border: 0; padding: 0 0 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.akte-zurueck:hover { color: var(--brand-text); }
.kunde-akte-kopf .rech-titelzeile { margin-bottom: 4px; }
.kunde-akte-kopf .rech-mehr-knopf { padding: 8px 12px; }
.akte-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.akte-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; text-decoration: none; --ico: var(--muted); }
a.akte-chip:hover, button.akte-chip:hover { border-color: var(--brand); color: var(--brand-text); --ico: var(--brand-text); cursor: pointer; }
.akte-chip > span:not(.kan-punkt) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akte-route { margin-left: 2px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-size: 12px; font-weight: 700; text-decoration: none; }
.akte-route:hover { background: var(--brand); color: var(--brand-ink); }
.akte-status { padding: 2px 4px 2px 11px; border-color: color-mix(in srgb, var(--kan-farbe) 45%, var(--line)); background: color-mix(in srgb, var(--kan-farbe) 9%, var(--card)); }
.akte-status .kan-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--kan-farbe); flex: 0 0 auto; }
.kunde-status-sel { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 4px 4px; cursor: pointer; }
.kunde-status-sel:focus { outline: none; }
.akte-karte { margin-top: 10px; }
.akte-karte > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); --ico: var(--muted); list-style: none; }
.akte-karte > summary::-webkit-details-marker { display: none; }
.akte-karte > summary::after { content: '▾'; font-size: 11px; }
.akte-karte[open] > summary::after { content: '▴'; }
.akte-karte > summary:hover { color: var(--brand-text); --ico: var(--brand-text); }
.kunde-fach-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.kunde-fach-reiter .rech-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; --ico: var(--muted); }
.kunde-fach-reiter .rech-status.aktiv { --ico: var(--brand-text); }
.kunde-fach { padding: 4px 2px 2px; border-radius: 10px; }
.kunde-fach table { width: 100%; margin-bottom: 10px; }
.kunde-fach table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.kunde-fach .empty { margin: 6px 0 12px; }
@media (max-width: 700px) {
  .kunde-akte-kopf .rech-toolbar-actions { width: 100%; }
  .kunde-akte-kopf .rech-toolbar-actions > .btn { flex: 1 1 0; justify-content: center; }
  .akte-chip { font-size: 13px; }
  .kunde-fach-reiter .rech-status { padding: 8px 9px; }
}
@media (max-width: 700px) {
  .kunde-akte-kopf .rech-toolbar-actions { flex-wrap: nowrap; }
  .kunde-akte-kopf .rech-toolbar-actions > .btn { min-width: 0; }
  .kunde-akte-kopf .rech-mehr-knopf { flex: 0 0 auto; }
  .kunde-fach table, .kunde-fach tbody { display: block; width: 100%; }
  .kunde-fach tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
  .kunde-fach table td { display: block; padding: 0; border: 0; }
  .kunde-fach table td:first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .kunde-fach table td.actions { margin-left: auto; }
}
/* v462: Titelknöpfe am Handy in EINER Zeile — Nebenknöpfe nur als Symbol, der Hauptknopf füllt den Rest */
@media (max-width: 900px) {
  .rech-titelzeile .rech-toolbar-actions { display: flex; flex-wrap: nowrap; }
  .rech-titelzeile .rech-toolbar-actions > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
  .rech-titelzeile .rech-toolbar-actions > .rech-mehr-knopf { flex: 0 0 auto; padding: 8px 12px; }
}
@media (max-width: 560px) {
  .rech-titelzeile .rech-toolbar-actions > .btn.secondary:has(> span:not(.ico)) { flex: 0 0 auto; padding-left: 13px; padding-right: 13px; }
  .rech-titelzeile .rech-toolbar-actions > .btn.secondary > span:not(.ico) { display: none; }
}

/* ---- v462: Kalender nach dem Schema ---- */
.cal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.cal-kopf .cal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cal-kopf select.cal-jump { border-color: transparent; background: transparent; font-family: var(--serif); font-size: 19px; font-weight: 700; padding: 4px 6px; }
.cal-kopf select.cal-jump:hover { border-color: var(--line); background: var(--card); }
.cal-pfeil { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.cal-pfeil:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }
.cal-heute { margin-left: 4px; }
.kday { background: var(--card); border: 1px solid #e6e9ef; border-radius: 10px; min-height: 104px; }
.kday.we { background: #f7f8fa; }
.kday.vorbei .kday-num { color: #9aa2b1; }
.kday:hover { border-color: var(--brand); }
.kday.today { background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.kday-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin: -2px 0 2px -2px; border-radius: 50%; font-size: 12.5px; }
.kday.today .kday-num { background: var(--brand); color: var(--brand-ink); }
.cal-kacheln .kwd { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.cal-liste { display: flex; flex-direction: column; }
.cal-liste-tag { padding: 14px 4px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-liste-tag:first-child { padding-top: 2px; }
.cal-liste-tag.heute { color: var(--brand-text); }
.cal-liste-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid #eef0f4; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.cal-liste-zeile:hover { background: var(--bg); }
.cal-liste-zeile.vorbei { opacity: .6; }
.cal-liste-zeile.abgesagt b { text-decoration: line-through; }
.cal-liste-zeit { flex: 0 0 92px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-liste-farbe { flex: 0 0 auto; width: 4px; align-self: stretch; min-height: 22px; border-radius: 3px; }
.cal-liste-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cal-liste-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-liste-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-liste-zeile .kpill-status { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 10px; }
@media (max-width: 700px) {
  .cal-kopf { margin-bottom: 8px; }
  .cal-kopf select.cal-jump { font-size: 16px; padding: 3px 2px; max-width: none; }
  .cal-pfeil { width: 30px; height: 30px; }
  .kday { min-height: 58px; border-radius: 8px; }
  .kday-num { min-width: 18px; height: 18px; font-size: 11px; }
  .cal-liste-zeit { flex-basis: 64px; font-size: 12px; }
}
.kday > .kday-num { align-self: flex-start; padding: 0 5px; }
@media (max-width: 700px) {
  .cal-kopf { flex-wrap: nowrap; }
  .cal-kopf .cal-fieldwrap > .btn > span:not(.ico) { display: none; }
  .kday .kpill, .kweek .kbar { min-height: 0; height: 6px !important; border-radius: 3px; }
  .kday .kpill .kpill-label, .kday .kpill .kpill-grip, .kweek .kbar .kpill-label, .kweek .kbar .kpill-grip { display: none; }
  .kday-pills { gap: 3px; }
}
@media (max-width: 700px) {
  .cal-kopf { gap: 4px; }
  .cal-kopf .cal-nav { gap: 2px; min-width: 0; }
  .cal-kopf select.cal-jump { font-size: 15px; padding: 3px 0; }
  .cal-heute { margin-left: 2px; padding: 6px 9px !important; }
  .cal-kopf .cal-fieldwrap > .btn { padding: 6px 9px; }
  .kday { min-height: 50px; }
}

/* ---- v462: Aufgaben ---- */
.aufg-liste { margin-top: 4px; display: flex; flex-direction: column; gap: 0; }
.aufg-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.aufg-zeile:hover { background: var(--bg); }
.aufg-zeile > input[type=checkbox] { width: 20px; height: 20px; margin-top: 1px; accent-color: #1a8f4c; cursor: pointer; flex: 0 0 auto; }
.aufg-zeile .task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.aufg-zeile .task-text2 { font-weight: 600; font-size: 14.5px; }
.aufg-zeile.done .task-text2 { text-decoration: line-through; color: var(--muted); }
.aufg-notiz { white-space: pre-wrap; margin: 0; }
.aufg-faellig { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 600; color: var(--muted); --ico: var(--muted); }
.aufg-faellig.spaet { background: #fde0e8; color: #b01545; --ico: #b01545; }
.aufg-zeile .task-acts { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.aufg-zeile .task-acts .btn { background: transparent; border-color: transparent; --ico: var(--muted); }
.aufg-zeile:hover .task-acts .btn { border-color: var(--line); }
.aufg-zeile .task-photo { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; flex: 0 0 auto; }
.aufg-zeile .task-acts { flex-direction: row !important; }
.aufg-notiz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; max-width: 760px; }
.aufg-notiz.auf { display: block; -webkit-line-clamp: unset; }

/* ---- v462: Finanzamtbriefe, Firmendaten, Private Dokumente ---- */
.rech-status.leer { color: #9aa2b1; }
.rech-status.leer .trk-reiter-zahl { opacity: .6; }
.rech-status.ziel { background: var(--brand-soft); border-radius: 8px 8px 0 0; }
.fa-bereich { font-size: 14px; color: var(--ink); }
.trk-werkzeug .buch-weitere > summary, .rech-toolbar-actions > .buch-weitere > summary { padding: 8px 12px; }
.rech-toolbar-actions > .buch-weitere .buch-weitere-menue { left: auto; right: 0; }
.firm-abschnitt { padding: 12px 2px 14px; border-top: 1px solid var(--line); border-radius: 10px; }
.firm-abschnitt:first-of-type { border-top: 0; }
.firm-abschnitt .firm-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.firm-abschnitt .firm-cat-head h3 { font-size: 15px; }
.firm-auto-schmal { margin: 4px 0 6px; }
.firm-auto-schmal.busy { opacity: .6; pointer-events: none; }
@media (max-width: 700px) {
  .rech-toolbar-actions > .buch-weitere > summary > span:not(.ico) { display: none; }
}

a.btn { text-decoration: none; }
.vd-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px !important; }
.vd-leiste .vd-ic { --ico: var(--brand-text); display: inline-flex; }
.vd-leiste .vd-titel { font-size: 14.5px; }
.vd-leiste .vd-stand { flex: 1 1 260px; min-width: 0; margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.vd-leiste .vd-stand > div { margin: 0 !important; font-weight: 500 !important; font-size: 13px; }
.vd-leiste .vd-knoepfe { display: flex; gap: 6px; margin-left: auto; }
/* Bedienelemente der Dokumentzeilen erst beim Darüberfahren deutlich (nur mit Maus) */
@media (hover: hover) {
  .firm-doc .firm-doc-ctrls, .firm-doc .firm-doc-top .doc-mini { opacity: .4; transition: opacity .12s; }
  .firm-doc:hover .firm-doc-ctrls, .firm-doc:hover .firm-doc-top .doc-mini, .firm-doc:focus-within .firm-doc-ctrls { opacity: 1; }
}

/* ---- v462: Mitarbeiter, Schichtplan, Zeit & Lohn ---- */
.emp-actions .rech-mehr-knopf { padding: 5px 10px; }
.schicht-zeitraum { font-size: 15px; padding: 0 6px; white-space: nowrap; }
.zeit-auswahl { margin: 0 0 10px; }
.zeit-kacheln { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zeit-lohn { margin: 0 0 10px; }
.zeit-lohn .docbox { flex: 1 1 auto; }
@media (max-width: 700px) {
  .cal-kopf .docview-switch .docview-btn { padding: 6px 8px; }
  .schicht-zeitraum { font-size: 13px; }
}
/* v462: Kennzahl-Kästen (.stat) im selben Stil wie die Kacheln der Buchhaltung */
.stat { padding: 11px 13px; border-radius: 12px; }
.stat .label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stat .value { font-family: inherit; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: 0; margin-top: 3px; }

/* v462: Startseite — Platzhalter ohne eigenes Layout, Schnellzugriff einklappbar */
.home-platz { display: contents; }
.home-quick-kopf { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: none; font: inherit; font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; --ico: var(--brand-text); }
.home-quick-pfeil { margin-left: auto; font-family: inherit; font-size: 13px; color: var(--muted); transition: transform .15s; }
.home-quick-karte.zu .home-quick-kopf { margin: 0; }
.home-quick-karte.zu .home-quick-pfeil { transform: rotate(-90deg); }
.home-quick-karte.zu > :not(.home-quick-kopf) { display: none; }

/* v462: seitenTitel auch in älteren Kopfzeilen (Flex-Reihen) ohne eigenen Abstand nach unten */
div:has(> h2.buch-titel) > h2.buch-titel { margin-bottom: 0; }
.card > h2.buch-titel:first-child { margin-bottom: 12px; }

/* v462: Einstellungen mit Kopf, Suche und Gruppen */
.einst-kopf .trk-werkzeug { margin-bottom: 0; }
.einst-gruppe { margin: 18px 4px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.setting-acc > .setting-acc-head { font-size: 16px; padding: 13px 18px; }

/* ======================= v463: Handy-App praktischer ======================= */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  /* A: Leiste mit Beschriftung, aktive Seite in Gold */
  .h-leiste { height: 66px; padding: 0 4px; }
  .h-leiste-knopf { flex-direction: column; gap: 1px; height: 58px; color: #7b8494; --ico: #7b8494; }
  .h-leiste-knopf .h-leiste-wort { display: block !important; font-size: 10.5px; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
  .h-leiste-knopf .ico { width: 44px; height: 30px; }
  .h-leiste-knopf.aktiv { color: var(--brand-text); --ico: var(--brand-text); }
  .h-leiste-knopf.aktiv .ico { background: var(--brand-soft); }
  .h-leiste-scan { height: 56px; width: 56px; margin-top: -20px; }
  .h-leiste-scan .h-leiste-wort { display: none !important; }
}
@media (max-width: 700px) {
  /* B: Kopfzeile klebt oben, beim Scrollen schmal */
  header.topbar { position: sticky; top: 6px; z-index: 35; transition: padding .15s; }
  body.h-klein header.topbar .h-gruss-datum, body.h-klein header.topbar .h-gruss-spruch { display: none; }
  body.h-klein header.topbar { box-shadow: 0 8px 22px rgba(15, 23, 42, .22); }

  /* C: Leisten wischbar statt Knopf-Raster */
  .rech-kopfleiste .acc-reiter { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .rech-kopfleiste .acc-reiter::-webkit-scrollbar, .buch-leiste::-webkit-scrollbar { display: none; }
  .rech-kopfleiste .acc-reiter > * { flex: 0 0 auto; }
  .buch-leiste { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding-bottom: 2px; }
  .buch-leiste > .buch-akt, .buch-leiste > .buch-weitere { flex: 0 0 auto; width: auto !important; }
  .buch-leiste > .buch-akt, .buch-leiste > .buch-weitere > summary { flex-direction: row !important; min-height: 0 !important; white-space: nowrap; padding: 8px 12px !important; font-size: 13px !important; }
  /* Menüs aus einer wischbaren Leiste klappen als Blatt von unten auf — sonst schnitte die Leiste sie ab */
  .buch-leiste > .buch-weitere[open] > .buch-weitere-menue, .rech-kopfleiste .buch-weitere[open] > .buch-weitere-menue {
    position: fixed; left: 10px; right: 10px; top: auto; bottom: 96px; width: auto; max-height: 62vh; overflow-y: auto; z-index: 60;
    box-shadow: 0 -8px 34px rgba(15, 23, 42, .28); border-radius: 16px; }

  /* E: mehr Platz — schmalere Ränder und Innenabstände */
  main.content { padding-left: 8px !important; padding-right: 8px !important; }
  .card { padding: 14px 12px; border-radius: 16px; }
  .card .card { padding: 12px 10px; }

  /* D: Seitenkopf der Handy-Kundenliste */
  .h-seitenkopf { margin: 2px 2px 10px; }
}
/* F: Schnellknöpfe anpassen */
.hs-anpassen { display: flex; align-items: center; gap: 5px; margin: -4px 0 10px auto; padding: 2px 4px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); --ico: var(--muted); cursor: pointer; }
.hs-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hs-wahl-zeile { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; --ico: var(--brand-text); }
.hs-wahl-zeile:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* ======================= v464: Handy praktischer, Teil 2 ======================= */
@media (max-width: 700px) {
  /* 1) Kennzahlen als EINE wischbare Zeile — der Inhalt beginnt weiter oben */
  .bilanz-kacheln { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 2px -2px 10px; padding: 0 2px 2px; }
  .bilanz-kacheln::-webkit-scrollbar { display: none; }
  .bilanz-kacheln > .bilanz-kachel { flex: 0 0 auto; min-width: 132px; max-width: 72vw; padding: 8px 11px !important; gap: 1px; }
  .bilanz-kacheln .bilanz-kachel-kopf { font-size: 10.5px; }
  .bilanz-kacheln .bilanz-kachel b { font-size: 16px !important; }
  .bilanz-kacheln .bilanz-kachel small { font-size: 11px; white-space: nowrap; }
  /* Suche und Jahr in einer Zeile */
  .rech-suchbox { flex: 1 1 0 !important; min-width: 0; }
  select.rech-jahr-sel, .trk-werkzeug > select.firm-filter-sel { width: auto; max-width: 128px; padding: 8px 8px; font-size: 13.5px; }

  /* 2) Belegkarten kompakt: nur „⋯" oben rechts, Tippen auf die Karte öffnet */
  table.rech-tabelle tr:not(.rech-monat) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "kunde betrag betrag" "nr status akt"; padding: 10px 10px 9px 12px; align-items: center; cursor: pointer; }
  table.rech-tabelle td.z-akt { grid-area: akt; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  table.rech-tabelle td.z-akt > div > *:not(.rech-mehr-knopf) { display: none !important; }
  table.rech-tabelle td.z-akt .rech-mehr-knopf { padding: 3px 10px; font-size: 17px; }
  table.rech-tabelle tr:not(.rech-monat):active { background: var(--bg); }

  /* 3) Kundenliste: Anrufen und Route neben der Karte */
  .hl-liste > li.hl-mit-tat { display: flex; align-items: stretch; gap: 6px; }
  .hl-liste > li.hl-mit-tat > .hl-zeile { flex: 1 1 auto; min-width: 0; }
  .hl-liste > li.hl-mit-tat .hl-pfeil { display: none; }
  .hl-taten { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
  .hl-tat { flex: 1 1 0; display: flex; align-items: center; justify-content: center; width: 46px; min-height: 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); --ico: var(--brand-text); }
  .hl-tat:active { background: var(--brand-soft); }

  /* 4) Eingabefenster als Vollbild mit festem Knopf unten */
  #modalRoot > .modal-backdrop { padding: 0; align-items: stretch; }
  #modalRoot > .modal-backdrop > .modal:not(.frage-modal) { max-width: none; width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding: 14px 14px 0; }
  #modalRoot > .modal-backdrop > .modal:not(.frage-modal) > h2 { position: sticky; top: -14px; z-index: 2; margin: -14px -14px 12px; padding: 14px 14px 10px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 18px; }
  #modalRoot .modal:not(.frage-modal) .modal-actions { position: sticky; bottom: 0; z-index: 2; margin: 16px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); flex-wrap: nowrap; }
  #modalRoot .modal:not(.frage-modal) .modal-actions .btn { flex: 1 1 0; padding-top: 12px; padding-bottom: 12px; }
  #modalRoot .modal input, #modalRoot .modal select, #modalRoot .modal textarea { font-size: 16px; }

  /* 6) Auf Arbeitsseiten steht der Name oben in der Kopfzeile — der Seitentitel im Inhalt entfällt
     (die Kundenakte behält ihren, dort ist es der Kundenname) */
  h2.buch-titel { display: none !important; }
  .kunde-akte-kopf h2.buch-titel { display: flex !important; }
  .rech-titelzeile:has(> h2.buch-titel) { margin-bottom: 8px; }

  /* 7) Startseite: leerer Tag nimmt nur eine Zeile */
  .hs-karte .figur-leer { padding: 4px 0 2px; gap: 10px; }
  .hs-karte .figur-leer-bild { height: 46px; }
  .hs-karte .figur-leer-text { flex-direction: row; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
  .hs-karte .figur-leer-text span { font-size: 12.5px; }
}
/* 7) Ziehen zum Aktualisieren */
.h-ziehen { position: fixed; top: 70px; left: 50%; z-index: 80; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--card); box-shadow: 0 4px 14px rgba(15, 23, 42, .2); opacity: 0; transform: translate(-50%, 0); pointer-events: none; --ico: var(--muted); transition: opacity .12s; }
.h-ziehen.sichtbar { opacity: 1; }
.h-ziehen.bereit { --ico: var(--brand-text); background: var(--brand-soft); }
.h-ziehen.laedt { animation: hZiehenDreh .7s linear infinite; }
@keyframes hZiehenDreh { from { transform: translate(-50%, 54px) rotate(0); } to { transform: translate(-50%, 54px) rotate(360deg); } }
@media (max-width: 700px) { body { overscroll-behavior-y: contain; } }
select.rech-jahr-sel { width: auto; padding: 8px 10px; font-size: 13.5px; }

/* ======================= v464: Themen ======================= */
/* Auswahl-Leiste war trotz hidden sichtbar (leerer goldener Balken) — display: flex schlug hidden */
.th-auswahlleiste[hidden] { display: none !important; }
/* Übersicht: kompakte Karten — Symbol links, Inhalt rechts (vorher eine große, meist leere Farbfläche) */
.th-kacheln { margin-bottom: 12px; }
.th-kacheln .bilanz-kachel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-raster { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important; gap: 10px !important; }
.th-kachel { display: grid !important; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px !important; min-height: 0 !important; border-radius: 14px; }
.th-kachel > .th-symbolflaeche, .th-kachel > .th-bild { width: 58px !important; height: 58px !important; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.th-kachel > .th-symbolflaeche svg { width: 28px !important; height: 28px !important; }
.th-kachel > .th-bild img { width: 100%; height: 100%; object-fit: cover; }
.th-kachel > .th-bild .th-symbolklein { display: none; }
.th-kachel .th-symbolflaeche .th-logo { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #fff; border-radius: 10px; }
.th-kachel > .th-symbolflaeche { position: relative; }
.th-kachel .th-inhalt { padding: 0 !important; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.th-kachel .th-titel { margin: 0; font-size: 15.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-kachel .th-notiz { margin: 0; font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-kachel .pj-minis { margin-top: 2px; }
.th-kachel:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.th-ordnerkopf { padding: 10px 12px !important; }
.th-ordnerkopf h3 { font-size: 15px; }
/* Akte */
.th-akte-kopf2 { align-items: center; }
.th-akte-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.th-akte-name .th-akte-symbol { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.th-akte-name .th-akte-symbol .th-logo { width: 100%; height: 100%; object-fit: contain; background: #fff; }
h2.th-akte-h2 { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: 21px; line-height: 1.2; min-width: 0; }
h2.th-akte-h2 .buch-titel-firma { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); }
.th-akte .th-akte-notiz { margin: 6px 0 4px; font-size: 13.5px; color: var(--muted); }
.th-akte-reiter { margin-top: 8px; }
.th-akte-reiter .rech-status { display: inline-flex; align-items: center; gap: 2px; --ico: var(--muted); }
.th-akte-reiter .rech-status.aktiv { --ico: var(--brand-text); }
.th-dropzone.dropzone-schmal { min-height: 0 !important; padding: 10px 14px !important; flex-direction: row !important; cursor: pointer; }
@media (max-width: 700px) {
  .th-raster { grid-template-columns: 1fr !important; }
  h2.th-akte-h2 { font-size: 18px; }
  .th-akte-name .th-akte-symbol { width: 40px; height: 40px; }
}

/* v464: Themen-Dateien als kompakte Liste */
.th-dateien.als-liste { display: flex !important; flex-direction: column; gap: 0 !important; }
.th-dateien.als-liste .th-datei { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
.th-dateien.als-liste .th-datei:hover { background: var(--bg); }
.th-dateien.als-liste .th-dateiflaeche { width: 44px; height: 44px; min-height: 0; aspect-ratio: auto; border-radius: 8px; overflow: hidden; padding: 0; }
.th-dateien.als-liste .th-dateiflaeche img, .th-dateien.als-liste .th-dateiflaeche canvas { width: 100%; height: 100%; object-fit: cover; }
.th-dateien.als-liste .th-dateiflaeche .firm-doccol-noprev span, .th-dateien.als-liste .th-dateiflaeche .pdfvorschau-stand, .th-dateien.als-liste .pdfvorschau-seiten, .th-dateien.als-liste .th-dateiart { display: none; }
.th-dateien.als-liste .th-dateiflaeche svg { width: 20px; height: 20px; }
.th-dateien.als-liste .th-dateifuss { padding: 0; min-width: 0; }
.th-dateien.als-liste .th-dateinotiz { display: none; }
.th-dateien.als-liste .th-dateiknoepfe { padding: 0; border: 0; }
.th-dateien.als-liste .th-auswahlhaken { position: static; }
.pj-kopfknoepfe .docview-switch { margin-right: 4px; }
@media (max-width: 700px) {
  .th-dateien.als-liste .th-datei { grid-template-columns: 40px minmax(0, 1fr); }
  .th-dateien.als-liste .th-dateiknoepfe { grid-column: 2; }
  .pj-kopfknoepfe .docview-lbl { display: none; }
}

/* ======================= v465: Postfach moderner ======================= */
/* Erkannte Rechnungen als schmale Zeile */
.mailsort-panel { border-radius: 12px; border: 1px solid var(--line); background: var(--card); padding: 0 !important; }
.mailsort-panel > .mailsort-head { padding: 8px 12px; gap: 8px; font-size: 13.5px; --ico: var(--brand-text); }
.mailsort-panel:not(.offen) { background: var(--brand-soft); border-color: #f3dcae; }
.mailsort-panel .mailsort-count { font-weight: 700; color: var(--brand-text); }
.mailsort-panel.offen > .mailsort-list { padding: 0 12px 12px; }
/* Breitere Liste als Vorgabe (ziehbar bleibt sie) */
.mail-listcol { flex-basis: var(--maillist-w, 380px) !important; }
/* Zeilen: zwei Zeilen statt drei, Adresse nur noch als Hinweis beim Darüberfahren */
@media (min-width: 701px) {
  .mail-row2 { padding: 10px 14px 10px 12px; gap: 11px; align-items: center; }
  .mail-row2 .mail-ava { width: 34px; height: 34px; font-size: 14px; flex: 0 0 34px; }
  .mail-row2-adr { display: none !important; }
  .mail-row2-top { gap: 6px; }
  .mail-row2-from { font-size: 14px; }
  .mail-row2-date { font-size: 11.5px; color: var(--muted); }
  .mail-row2-sub { margin-top: 2px; font-size: 13px; }
}
.mail-row2.unread { background: var(--card); }
.mail-row2.unread:hover { background: var(--bg); }
.mail-row2.unread .mail-row2-from::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.mail-row2.sel, .mail-row2.sel:hover { background: var(--brand-soft) !important; box-shadow: inset 3px 0 0 var(--brand); }
.mail-row2:hover { background: var(--bg); }
.mail-row2 .mail-acc-tag { font-size: 10.5px; padding: 1px 7px; }
.mail-daygroup { padding: 12px 14px 5px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: none; }
/* Kategorie-Reiter ohne Rollbalken */
.mail-cats { scrollbar-width: none; }
.mail-cats::-webkit-scrollbar { display: none; }
.mail-cat { font-size: 12.5px; }
.mail-cat.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
/* Lesebereich: ruhige, einheitliche Knöpfe; „Antworten" bleibt gold; Löschen rot erst beim Darüberfahren */
.mailview-actions .btn.secondary.mv-act { background: transparent; border-color: var(--line); color: var(--ink); --ico: var(--muted); }
.mailview-actions .btn.secondary.mv-act:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); --ico: var(--brand-text); }
.mailview-actions .btn.mv-gefahr:hover { background: #fdecea !important; border-color: #f5c2bc !important; color: var(--warn-strong) !important; --ico: var(--warn-strong) !important; }
.mailview-head h2, .mailview-head .mailview-subject { font-family: inherit; letter-spacing: -.01em; }
/* „‹ Zurück" braucht es am PC nicht — dort stehen Liste und Mail nebeneinander, es gibt das ✕ */
@media (min-width: 901px) { .mail-readpane2 .mail-back { display: none !important; } }
/* Leerer Lesebereich ruhiger */
.mail-readpane2 { background: var(--card); }
/* v465: Klare Trennung zwischen den Mails (Wunsch des Nutzers) */
/* PC: deutliche Linie zwischen den Zeilen */
.mail-listbody .mail-row2 { border-bottom: 1px solid #dfe3ea; }
/* Handy: jede Mail eine eigene Karte mit Abstand auf grauem Grund */
@media (max-width: 700px) {
  .mail-listbody { background: #eef0f4; padding: 0 8px 8px; }
  .mail-listbody .mail-swipe { margin: 0 0 8px; border-radius: 14px; border: 1px solid #dde1e8; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }
  .mail-listbody .mail-swipe .mail-row2 { border-bottom: 0; border-radius: 14px; padding: 12px 12px; }
  .mail-listbody .mail-swipe .mail-row2.sel { box-shadow: inset 3px 0 0 var(--brand); }
  .mail-listbody .mail-swipe .mail-row2.unread { border-left: 0; }
  .mail-listbody .mail-swipe:has(.mail-row2.unread) { border-color: #f0d49a; }
  .mail-listbody .mail-daygroup { padding: 14px 6px 6px; background: none; }
}
/* v466: Klare Trennung auch am PC — jede Mail eine eigene Karte mit Abstand (Wunsch: „übersichtlicher und getrennt") */
.mail-listbody { background: #eef0f4; padding: 0 8px 8px; }
.mail-listbody .mail-swipe { margin: 0 0 7px; border-radius: 12px; border: 1px solid #dde1e8; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.mail-listbody .mail-swipe .mail-row2 { border-bottom: 0 !important; border-radius: 12px; }
.mail-listbody .mail-swipe:hover { border-color: #c9ced8; }
.mail-listbody .mail-swipe:has(.mail-row2.unread) { border-color: #f0d49a; }
.mail-listbody .mail-swipe:has(.mail-row2.sel) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.mail-listbody .mail-swipe .mail-row2.sel { box-shadow: none; }
.mail-listbody .mail-daygroup { padding: 14px 6px 6px; background: none; }
.mail-listbody .mail-suchkopf { margin: 8px 0; }
html.dark .mail-listbody { background: #0f1722; }
html.dark .mail-listbody .mail-swipe { border-color: #243246; }

/* v467: Große Blätter-Pfeile im Dateibetrachter */
.mit-blaettern { position: relative; }
.docview-seitenpfeil { position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 14px;
  background: rgba(31, 42, 64, .72); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .25); opacity: .85; transition: opacity .12s, background .12s; }
.docview-seitenpfeil:hover { opacity: 1; background: var(--brand); color: var(--brand-ink); }
.docview-seitenpfeil.links { left: 12px; }
.docview-seitenpfeil.rechts { right: 12px; }
@media (max-width: 700px) { .docview-seitenpfeil { width: 38px; height: 52px; font-size: 28px; opacity: .7; } .docview-seitenpfeil.links { left: 6px; } .docview-seitenpfeil.rechts { right: 6px; } }

/* v468: Anhang-Zeile öffnet per Tipp */
.mail-att.mail-att-klickbar { cursor: pointer; }
.mail-att.mail-att-klickbar:hover { border-color: var(--brand); background: var(--brand-soft); }
.mail-att.mail-att-klickbar .mail-att-name { text-decoration: underline; text-decoration-color: transparent; }
.mail-att.mail-att-klickbar:hover .mail-att-name { text-decoration-color: currentColor; }
@media (max-width: 700px) {
  /* Am Handy: „Ansehen" entfällt als Knopf — die Zeile selbst öffnet */
  .mail-att.mail-att-klickbar .mail-att-ansehen { display: none; }
}

/* ======================= v469: Portale ======================= */
.portal-hinweis { display: flex; align-items: center; gap: 4px; margin: -4px 0 12px; font-size: 12.5px; --ico: var(--muted); }
.portal-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.portal-kachel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color .12s, box-shadow .12s; }
.portal-kachel:hover { border-color: #c9ced8; box-shadow: 0 6px 18px rgba(15, 23, 42, .07); }
.portal-kachel.ziel { border-color: var(--brand); background: var(--brand-soft); }
.portal-kopf { display: flex; align-items: center; gap: 12px; }
.portal-logo { position: relative; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; overflow: hidden; border: 1px solid var(--line); }
.portal-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; }
.portal-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.portal-text b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-chip { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 3px; padding: 1px 8px; border-radius: 999px; background: var(--bg); font-size: 11.5px; color: var(--muted); --ico: var(--muted); }
.portal-benutzer { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.portal-kopieren { border: 0; background: none; padding: 2px 4px; cursor: pointer; --ico: var(--muted); }
.portal-kopieren:hover { --ico: var(--brand-text); }
.portal-notiz { font-size: 12.5px; color: var(--muted); white-space: pre-wrap; }
.portal-knoepfe { display: flex; gap: 8px; margin-top: auto; }
.portal-knoepfe .btn { flex: 1 1 0; justify-content: center; }
.portal-zuletzt { font-size: 11.5px; color: var(--muted); }
.portal-vorschlaege { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
@media (max-width: 700px) {
  .portal-raster { grid-template-columns: 1fr; }
}
.portal-hinweis { margin: 2px 0 14px !important; }
.portal-knoepfe .btn { white-space: nowrap; font-size: 13.5px; padding-top: 9px; padding-bottom: 9px; }

/* ======================= v470: Portale automatisch ======================= */
.portal-auto-schalter { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid #f3dcae; border-radius: 10px; background: var(--brand-soft); cursor: pointer; }
.portal-auto-schalter input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-dark); }
.portal-auto-schalter span { display: flex; flex-direction: column; gap: 2px; }
.portal-auto-schalter small { color: var(--muted); font-size: 12px; }
.portal-monate { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.portal-monat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 8px; background: var(--bg); font-size: 11px; color: var(--muted); }
.portal-monat b { font-size: 14px; line-height: 1.1; }
.portal-monat.da { background: #e3f5ea; color: #156c3b; }
.portal-monat.fehlt { background: #fde0e8; color: #b01545; }
.portal-monat.erwartet { background: var(--brand-soft); color: var(--brand-text); }
.portal-auto { font-size: 12px; color: #156c3b; --ico: #156c3b; display: flex; align-items: center; }
.home-portale-fehlen .hs-mehr, .home-portale-fehlen .btn { flex: 0 0 auto; }
.portal-erinnerung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px !important; border-color: #f5c2bc !important; background: #fff6f5 !important; }
.portal-erinnerung > b { color: var(--warn-strong); }
.portal-erinnerung .portal-erinnerung-liste { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }

.portal-monat.teilweise { background: #fff1d6; color: #9a5b00; }
.portal-vertraege { display: flex; flex-wrap: wrap; gap: 4px; }
.portal-vertrag { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: copy; }
.portal-vertrag:hover { border-color: var(--brand); background: var(--brand-soft); }

/* v471: geholte Rechnungen ansehen */
button.portal-monat { border: 0; font: inherit; cursor: pointer; }
.portal-monat.klickbar:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.portal-rechnungen-knopf { display: flex; align-items: center; gap: 4px; align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-text); cursor: pointer; --ico: var(--brand-text); }
.portal-rechnungen-knopf:hover { text-decoration: underline; }
.portal-rliste { display: flex; flex-direction: column; }
.portal-rliste-monat { display: flex; justify-content: space-between; padding: 12px 4px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.portal-rliste-monat span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.portal-rliste-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid #eef0f4; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); --ico: var(--brand-text); }
.portal-rliste-zeile:hover { background: var(--brand-soft); }
.portal-rliste-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.portal-rliste-text b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-rliste-text small { font-size: 12px; color: var(--muted); }
.portal-rliste-betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.portal-wartend { font-size: 12px; color: #9a5b00; --ico: #9a5b00; display: flex; align-items: center; }

.portal-nachholen { font-size: 12px; color: var(--muted); --ico: var(--muted); display: flex; align-items: center; }
.portal-nachholen.laeuft { color: var(--brand-text); --ico: var(--brand-text); }
.portal-nachholen.laeuft .ico svg { animation: hZiehenDreh2 1s linear infinite; }
@keyframes hZiehenDreh2 { to { transform: rotate(360deg); } }

/* ---- v477: ELSTER — Umsatzsteuer-Voranmeldung ---- */
.elster-fenster { max-width: 860px; }
.elster-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.elster-kopf h2 { margin: 0 0 2px; font-size: 18px; }
.elster-zeitwahl { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.elster-zeitwahl label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.elster-zeitwahl select { width: auto; }
.elster-inhalt { display: flex; flex-direction: column; gap: 12px; }
.elster-band { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; border: 1px solid; }
.elster-band.warn { background: #fff7e6; border-color: #f2c46d; color: #6b4a00; }
.elster-band.ok { background: #eef5ff; border-color: #b9d2f7; color: #173f78; }
.elster-tabelle-wrap { overflow-x: auto; }
.elster-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.elster-tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.elster-tabelle td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.elster-tabelle .num { text-align: right; white-space: nowrap; }
.elster-tabelle .elster-kz { font-weight: 700; white-space: nowrap; color: #1b2a57; width: 70px; }
.elster-tabelle tr.elster-summe td { font-weight: 700; border-top: 2px solid #1b2a57; border-bottom: none; font-size: 15px; }
.elster-pruef { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; }
.elster-pruef ul { margin: 6px 0 0; padding-left: 18px; }
.elster-pruef li { margin: 3px 0; }
.elster-pruef.fehler { background: #fdecef; color: #8a1730; }
.elster-pruef.warn { background: #fff7e6; color: #6b4a00; }
.elster-pruef.info { background: #f4f5f7; color: var(--muted); }
.elster-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; cursor: pointer; }
.elster-check input { width: auto; margin: 0; }
.elster-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.elster-schritte { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.elster-h3 { margin: 6px 0 0; font-size: 14px; }
.elster-meldung { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.elster-meldung.gesendet { border-color: #a6d8b9; background: #f1faf4; }
.elster-meldung-tat { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.elster-meldung-tat input { width: 220px; }
.elster-einrichtung { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.elster-einrichtung summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.elster-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.elster-felder > label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.elster-felder > label.elster-check { flex-direction: row; grid-column: 1 / -1; color: inherit; }
@media (max-width: 560px) {
  .elster-felder { grid-template-columns: 1fr; }
  .elster-meldung-tat input { width: 100%; }
  .elster-tabelle td, .elster-tabelle th { padding: 6px 4px; }
}
@media (max-width: 560px) {
  /* Kennzahl + Bezeichnung oben, Grundlage und Steuer darunter — sonst schneidet das Handy die Beträge ab. */
  .elster-tabelle thead { display: none; }
  .elster-tabelle tr { display: grid; grid-template-columns: 54px 1fr auto; grid-template-areas: "kz text text" ". grund steuer"; column-gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 0; }
  .elster-tabelle td { border: none; padding: 2px 0; }
  .elster-tabelle td:nth-child(1) { grid-area: kz; width: auto; }
  .elster-tabelle td:nth-child(2) { grid-area: text; }
  .elster-tabelle td:nth-child(3) { grid-area: grund; text-align: left; color: var(--muted); }
  .elster-tabelle td:nth-child(4) { grid-area: steuer; }
  .elster-tabelle tr.elster-summe { border-top: 2px solid #1b2a57; border-bottom: none; }
  .elster-tabelle tr.elster-summe td { border: none; }
}
@media (max-width: 560px) {
  .elster-tabelle, .elster-tabelle tbody { display: block; width: 100%; }
  .elster-tabelle td { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .elster-tabelle td.num { white-space: nowrap; }
}

.elster-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- v478: Bankumsätze ---- */
.bank-fenster { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.bank-weg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.bank-h3 { margin: 0 0 6px; font-size: 14.5px; }
.bank-schritte { margin: 4px 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; }
.bank-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank-zeile input[type=file] { flex: 1 1 240px; min-width: 0; }
.bank-ergebnis { margin-top: 8px; font-size: 13.5px; }
.bank-erg-kopf { background: #eef8f1; border: 1px solid #b6e0c4; color: #145c33; border-radius: 8px; padding: 8px 10px; font-weight: 600; margin: 6px 0; }
.bank-erg-monate { margin: 6px 0; padding-left: 20px; }
.bank-tabelle-wrap { overflow-x: auto; }
.bank-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bank-tabelle th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--line); }
.bank-tabelle td { padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bank-tabelle .num { text-align: right; }

/* ---- v479: geteilte Kontoauszüge ---- */
.teilen-fenster { display: flex; flex-direction: column; gap: 10px; }
.teilen-zeile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.teilen-name { font-weight: 600; word-break: break-word; }
.teilen-ok { color: #145c33; font-size: 13.5px; }
/* Profilfotos (16.10.2026): Das Foto liegt ÜBER dem Buchstaben im Kreis — lädt es nicht, bleibt der Buchstabe. */
.mit-foto { position: relative; overflow: hidden; }
.mit-foto > img.profilfoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.foto-aenderbar { cursor: pointer; }
.foto-aenderbar:focus-visible { outline: 3px solid #FDB913; outline-offset: 2px; }
.hm-konto-foto { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: #111827; color: #FDB913; font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pf-fenster { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-rahmen { border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(17, 24, 39, .18); touch-action: none; }
.pf-leinwand { display: block; cursor: grab; touch-action: none; }
.pf-leinwand:active { cursor: grabbing; }
.pf-zoom { width: min(260px, 100%); }
.pf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* Kundenkarte (16.10.2026): Anrufen · E-Mail · Route als drei gleich breite Knöpfe IN der Karte, unter Name und
   Anschrift. Die Karte ist jetzt das <li> selbst; die Zeile darin verliert ihren eigenen Rahmen. Spezifischer als die
   älteren Regeln für .hl-taten/.hl-tat (Knöpfe rechts daneben, untereinander), die damit nicht mehr greifen. */
.hl-liste > li.hl-karte { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--h-rahmen, var(--line)); border-radius: 16px; overflow: hidden; }
.hl-liste > li.hl-karte > .hl-zeile { border: 0; border-radius: 0; background: transparent; }
.hl-liste > li.hl-karte > .hl-zeile .hl-pfeil { display: none; }
.hl-liste > li.hl-karte > .hl-taten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.hl-liste > li.hl-karte .hl-tat { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 42px; padding: 0 6px; border: 1px solid var(--line); border-radius: 12px; background: #F7F8FA; color: var(--h-ink, #111827); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; --ico: var(--brand-text, #B07800); }
.hl-liste > li.hl-karte .hl-tat:active { background: var(--brand-soft, #FFF4D1); }
.hl-liste > li.hl-karte .hl-tat.aus { opacity: .35; cursor: default; }
.hl-liste > li.hl-karte .hl-tat > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v540: Konten und ihre Firmen (Bankumsätze, Kontoauszüge holen, Teilen) */
.konten-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.konten-box:empty { display: none; }
.konto-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.konto-zeile.wartet { border-color: #e8a317; background: #fff8e6; }
.konto-zeile > .hint, .konto-zeile > .teilen-ok, .konto-zeile > .error-msg { grid-column: 1 / -1; }
.konto-zeile > .hint:empty { display: none; }
.konto-wahl { display: flex; gap: 6px; align-items: center; }
.konto-wahl select { max-width: 260px; }
@media (max-width: 560px) { .konto-zeile { grid-template-columns: 1fr; } .konto-wahl select { flex: 1; max-width: none; } }
/* v480: App-Logo endet an der Goldkante (durchsichtige Ecken) — Schatten folgt der Form statt eines Kastens. */
.login-logo { border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .28)); }

/* ======================= v483: Handy-Leiste unten schlanker ======================= */
/* Wunsch: Leiste kleiner und dünner, Scan-Knopf mittig IN der Leiste statt darüber schwebend, und kleiner. */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-leiste { height: 52px; bottom: 12px; border-radius: 17px; padding: 0 4px; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); }
  .h-leiste-knopf { height: 46px; gap: 0; }
  .h-leiste-knopf .ico { width: 38px; height: 24px; border-radius: 9px; }
  .h-leiste-knopf svg { width: 19px; height: 19px; stroke-width: 1.7; }
  .h-leiste-knopf .h-leiste-wort { font-size: 9.5px; font-weight: 600; }
  .h-leiste-scan { width: 40px !important; height: 40px !important; flex: 0 0 40px; margin-top: 0; align-self: center; justify-self: center;
    box-shadow: 0 3px 8px rgba(224, 168, 63, .35); }
  .h-leiste-scan svg { width: 19px; height: 19px; }
  main.content { padding-bottom: 84px; }
  #scanFab, #aiFab { bottom: 76px; }
}

/* ======================= v483: Kopfleiste am Handy kleiner und dünner ======================= */
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  header.topbar { min-height: 50px; padding: 5px 10px; border-radius: 20px; margin: 8px 10px 0; gap: 6px; }
  header.topbar .h-firma-logo { height: 22px; max-width: 104px; padding: 2px 5px; border-radius: 6px; }
  header.topbar .h-firma svg { width: 12px; height: 12px; }
  .h-gruss { height: 38px; }
  .h-gruss-name, .h-gruss.nur-titel .h-gruss-name { font-size: 13px; font-weight: 600; }
  .h-gruss-datum { font-size: 9.5px; font-weight: 500; }
  .h-gruss-spruch, .h-gruss-spruch.arabisch { font-size: 10.5px; font-weight: 500; }
  .h-kopf-knopf { width: 32px; height: 36px; }
  .h-kopf-knopf svg { width: 17px; height: 17px; stroke-width: 1.7; }
}

/* ======================= v484: Handy-Leiste — Antippen leuchtet ======================= */
@keyframes hLeuchten {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(224, 168, 63, 0); }
  30%  { transform: scale(1.14); box-shadow: 0 0 14px 4px rgba(224, 168, 63, .55); background: rgba(224, 168, 63, .22); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(224, 168, 63, 0); }
}
@keyframes hLeuchtenScan {
  0%   { transform: scale(1);    box-shadow: 0 3px 8px rgba(224, 168, 63, .35), 0 0 0 0 rgba(224, 168, 63, .6); }
  35%  { transform: scale(1.12); box-shadow: 0 3px 14px rgba(224, 168, 63, .6), 0 0 0 9px rgba(224, 168, 63, .25); }
  100% { transform: scale(1);    box-shadow: 0 3px 8px rgba(224, 168, 63, .35), 0 0 0 14px rgba(224, 168, 63, 0); }
}
@media (max-width: 999px), (min-width: 1000px) and (max-width: 1024px) and (pointer: fine), (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .h-leiste-knopf { -webkit-tap-highlight-color: transparent; }
  .h-leiste-knopf .ico { transition: color .2s; }
  .h-leiste-knopf.leuchtet:not(.h-leiste-scan) .ico { animation: hLeuchten .45s ease-out; --ico: var(--brand-text); }
  .h-leiste-knopf.leuchtet:not(.h-leiste-scan) .h-leiste-wort { color: var(--brand-text); transition: color .2s; }
  .h-leiste-scan.leuchtet { animation: hLeuchtenScan .5s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .h-leiste-knopf.leuchtet .ico, .h-leiste-scan.leuchtet { animation-duration: .01s; }
}

/* ======================= v485: Kontoauszug-Buchungen als Karten (Handy UND PC) =======================
   Wunsch: jede Buchung in ihrem eigenen Rahmen, ordentlich untereinander; Wichtiges groß (Empfänger,
   Betrag), Nebensachen klein (Datum, Zweck, Konto); alles mit dem Finger gut zu treffen.
   Status als farbiger Streifen links statt der ganzen Zeile in Rot/Grün/Gelb. */
.konto-karten, .konto-karten tbody { display: block; width: 100%; border: 0; }
.konto-karten thead { display: none; }
.konto-karten tbody { display: flex; flex-direction: column; gap: 10px; }
.konto-karten tr {
  display: grid; position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "datum betrag" "name name" "kat kat" "beleg beleg" "notiz notiz";
  column-gap: 12px; row-gap: 8px;
  padding: 12px 14px 12px 18px; background: var(--card, #fff);
  border: 1px solid #e3e7ee; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.konto-karten tr::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #cbd2dc; }
.konto-karten tr.tx-ok::before { background: #2f9e62; }
.konto-karten tr.tx-missing::before { background: #e0455e; }
.konto-karten tr.tx-unklar::before { background: #e0a800; }
.konto-karten tr.tx-missing { background: #fffafa; border-color: #f3d3d8; }
.konto-karten tr.tx-unklar { background: #fffdf5; border-color: #f1e2b3; }
/* Alte Zeilen-Einfärbung und Zellen-Beschriftungen aus der Tabellenfassung abschalten. */
.konto-karten tr td, .konto-karten tr.tx-ok td, .konto-karten tr.tx-missing td, .konto-karten tr.tx-unklar td {
  display: block; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; min-width: 0; font-size: 14px; }
.konto-karten td::before { display: none !important; content: none !important; }

.konto-karten .kk-datum { grid-area: datum; align-self: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.konto-karten tr td.kk-art { display: none !important; }       /* Richtung steckt schon im Betrag (Farbe + Vorzeichen) */
.konto-karten .kk-betrag { grid-area: betrag; align-self: center; font-size: 17px; font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.konto-karten tr.kk-ausgang .kk-betrag { color: #b4233b; }
.konto-karten tr.kk-eingang .kk-betrag { color: #1f7a45; }
.konto-karten .kk-name { grid-area: name; }
.konto-karten .kk-wer { font-size: 15px; font-weight: 650; color: var(--ink, #1c2434); line-height: 1.3; overflow-wrap: anywhere; }
.konto-karten .kk-zweck { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.konto-karten .kk-kat { grid-area: kat; display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.konto-karten .konto-cat-sel { font-size: 14px; height: 38px; padding: 0 30px 0 10px; border-radius: 9px; max-width: 100%; min-width: 0; flex: 1 1 170px; }
.konto-karten .konto-cat-sel + .konto-badge { margin-top: 0; }
.konto-karten .konto-badge { font-size: 12px; padding: 4px 8px; border-radius: 7px; min-height: 28px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-karten .kk-beleg { grid-area: beleg; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding-top: 8px !important; border-top: 1px dashed #e3e7ee !important; }
.konto-karten .kk-beleg .konto-ok, .konto-karten .kk-beleg .konto-no, .konto-karten .kk-beleg .konto-unklar { font-size: 13.5px; }
.konto-karten .zuord-stift { width: 36px; height: 36px; border-radius: 9px; border: 1px solid #e3e7ee; background: #fff; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; margin-left: auto; }
.konto-karten .kk-notiz { grid-area: notiz; }
.konto-karten .konto-note { width: 100%; height: 36px; font-size: 13.5px; padding: 0 10px; border-radius: 9px; box-sizing: border-box; background: #fafbfc; }

/* PC: zwei Zeilen statt fünf — oben Datum · Empfänger · Betrag, unten Kategorie · Beleg · Notiz. */
@media (min-width: 900px) {
  .konto-karten tr {
    grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 1fr) minmax(170px, .9fr) auto;
    grid-template-areas: "datum name name name betrag" ". kat beleg notiz notiz";
    row-gap: 10px; column-gap: 16px; padding: 12px 16px 12px 20px;
  }
  .konto-karten .kk-datum { align-self: start; padding-top: 2px !important; }
  .konto-karten .kk-beleg { padding-top: 0 !important; border-top: 0 !important; justify-content: flex-start; }
  .konto-karten .zuord-stift { margin-left: 4px; }
}

/* ---- v486: schon verbuchte Belege im Zuordnen-Fenster ---- */
.zuord-item.verbucht { background: #f6f7f9; border-color: #e3e7ee; opacity: .85; }
.zuord-item.verbucht .zuord-name { color: #5b6472; }
.zuord-verbucht { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #8a1730; background: #fdecef; border-radius: 7px; padding: 4px 8px; line-height: 1.35; }
.zuord-trenner { margin: 12px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zuord-warnung { border: 1px solid #f2c46d; background: #fff7e6; color: #5a3d00; border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.zuord-warnung[hidden] { display: none; }
.zuord-warnung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ======================= v487: Kalender — kommende Termine leuchten, heute am stärksten ======================= */
@keyframes calBalken { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 9px 2px var(--farbe, #2f6fed); } }
@keyframes calHeute {
  0%, 100% { box-shadow: 0 0 0 1px rgba(224, 168, 63, .45), 0 2px 10px rgba(224, 168, 63, .18); }
  50%      { box-shadow: 0 0 0 2px rgba(224, 168, 63, .85), 0 4px 22px rgba(224, 168, 63, .45); }
}
@keyframes calSchimmer { 0% { background-position: -160% 0; } 60%, 100% { background-position: 260% 0; } }
/* Kommend: der Farbbalken atmet ruhig, die Zeile ist eine Spur heller hinterlegt. */
.cal-liste-zeile.kommend { background: linear-gradient(90deg, color-mix(in srgb, var(--farbe, #2f6fed) 7%, transparent), transparent 55%); }
.cal-liste-zeile.kommend .cal-liste-farbe { animation: calBalken 2.8s ease-in-out infinite; }
.cal-liste-zeile.kommend b { color: var(--ink, #1c2434); }
/* Heute: eigene goldene Karte, pulsierender Rand, Lichtstreifen läuft durch, Balken leuchtet stärker. */
.cal-liste-zeile.heute {
  position: relative; overflow: hidden; margin: 6px 0; border-radius: 12px; border-bottom-color: transparent;
  background: linear-gradient(100deg, #fff8e8 0%, #fff3d6 100%);
  animation: calHeute 2s ease-in-out infinite;
}
.cal-liste-zeile.heute::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%) no-repeat;
  background-size: 60% 100%; animation: calSchimmer 3.2s ease-in-out infinite; }
.cal-liste-zeile.heute .cal-liste-farbe { width: 5px; animation: calBalken 1.4s ease-in-out infinite; }
.cal-liste-zeile.heute .cal-liste-zeit { color: #8a5a00; }
.cal-liste-zeile.heute b { font-weight: 700; }
.cal-liste-zeile.heute:hover { background: linear-gradient(100deg, #fff3d6 0%, #ffecc2 100%); }
@media (prefers-reduced-motion: reduce) {
  .cal-liste-zeile.kommend .cal-liste-farbe, .cal-liste-zeile.heute, .cal-liste-zeile.heute::after, .cal-liste-zeile.heute .cal-liste-farbe { animation: none; }
}

/* ======================= v488: Termin-Fenster aufgeräumt ======================= */
.appt-gruppe { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 2px; margin: 0 0 12px; background: var(--card, #fff); }
.appt-gruppe-kopf { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.appt-gruppe .field { margin-bottom: 12px; }
.appt-gruppe .field > label { font-size: 12.5px; margin-bottom: 4px; }
.appt-zeit-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 10px; }
.appt-zeit-raster .field { min-width: 0; }
.appt-zeit-raster input { width: 100%; min-width: 0; box-sizing: border-box; }
.appt-hinweis { font-size: 12px; margin: -4px 0 12px; }
.appt-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: -2px 0 12px; }
.appt-check input { width: auto; margin: 0; }
.appt-gruppe .appt-preview { font-size: 14px; padding: 8px 12px; border-radius: 8px; min-height: 0; }
.appt-gruppe .swatch-row { gap: 8px; }
.appt-gruppe .swatch { width: 28px; height: 28px; }
.appt-gruppe .cat-btn { padding: 5px 10px; font-size: 12.5px; gap: 6px; }
.appt-gruppe .erinner-chip { padding: 6px 10px; font-size: 12.5px; }
.appt-gruppe .tasks-box { padding: 8px 10px; }
.appt-gruppe .add-task { padding: 6px 12px; font-size: 13px; }
.appt-gruppe .swatch-row { gap: 6px; }
.appt-gruppe .swatch { width: 26px; height: 26px; }
.appt-gruppe .cat-row .link, .appt-gruppe .link { font-size: 12.5px; color: var(--brand-text); align-self: center; }
/* Zehn Farben immer in EINER Reihe: gleichmäßiges Raster, Punkte füllen ihre Spalte (höchstens 30 px). */
.appt-gruppe .swatch-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.appt-gruppe .swatch { box-sizing: border-box; width: 100%; max-width: 30px; height: auto; aspect-ratio: 1; }

/* ======================= v489: Postfach am Handy — Antworten / Weiterleiten / Sperren sichtbar ======================= */
/* Am PC und Tablet bleibt die Leiste wie sie war; die Trennung zwischen den Reihen gibt es nur am Handy. */
.mailview-actions .mv-umbruch { display: none; }
@media (max-width: 560px) {
  /* Die untere Navigation lag GENAU über der festen Aktionsleiste und verdeckte Antworten/Weiterleiten.
     Solange eine Mail offen ist, macht sie Platz — der Zurück-Pfeil oben bringt sie wieder. */
  body.view-mailbox:has(.mail-shell.has-sel) nav.h-leiste { display: none !important; }
  .mailview .mailview-actions { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 8px; }
  .mail-readpane2 .mailview.inline .mailview-actions { bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--card, #fff); }
  .mailview .mailview-actions .mv-act.mv-haupt { order: 1; flex: 1 1 0; height: 46px; padding: 0 6px; gap: 6px;
    font-size: 14px; font-weight: 700; border-radius: 12px; justify-content: center; }
  .mailview .mailview-actions .mv-act.mv-haupt span:not(.ico) { display: inline !important; }
  .mailview .mailview-actions .mv-act.mv-haupt .ico svg { width: 18px; height: 18px; }
  .mailview .mailview-actions .mv-act.mv-sperren { color: #b4233b; border-color: #f0c4cc; --ico: #b4233b; }
  .mailview .mailview-actions .mv-umbruch { display: block; order: 2; flex: 0 0 100%; height: 0; }
  .mailview .mailview-actions .mv-act:not(.mv-haupt) { order: 3; flex: 1 1 0; min-width: 0; height: 38px; padding: 0; border-radius: 10px; }
  .mail-readpane2 .mailview.inline .mailview-scroll { padding-bottom: 128px; }
}

/* ======================= v490: Mail-Leiste am Handy — eine schlanke Reihe wie die Navigation ======================= */
.mailview-actions .mv-mehr { display: none; }
@media (max-width: 560px) {
  .mailview .mailview-actions { padding: 4px 6px; gap: 2px; border-radius: 18px; }
  .mail-readpane2 .mailview.inline .mailview-actions { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); border: 1px solid #e3e7ee; box-shadow: 0 8px 24px rgba(20, 28, 45, .14); }
  /* Jeder Knopf: Symbol oben, kleine Beschriftung darunter — kein Rahmen, kein Kasten. */
  .mailview .mailview-actions .mv-act,
  .mailview .mailview-actions .mv-act.mv-haupt,
  .mailview .mailview-actions .mv-act:not(.mv-haupt) {
    order: 2; flex: 1 1 0; min-width: 0; height: 50px; padding: 0; border: 0 !important; background: transparent !important;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px;
    color: #6b7385; --ico: #6b7385; font-size: 10px; font-weight: 600; box-shadow: none !important; }
  .mailview .mailview-actions .mv-act span:not(.ico) { display: block !important; font-size: 10px; line-height: 1.1; white-space: nowrap; }
  .mailview .mailview-actions .mv-act .ico svg { width: 19px !important; height: 19px !important; stroke-width: 1.8; }
  .mailview .mailview-actions .mv-act:active { background: var(--brand-soft, #fbefd4) !important; }
  /* Antworten: goldener Kreis ums Symbol, wie die aktive Seite in der Navigation */
  .mailview .mailview-actions .mv-act.mv-haupt:first-child { color: var(--brand-text, #8a5a00); --ico: var(--brand-text, #8a5a00); }
  .mailview .mailview-actions .mv-act.mv-haupt:first-child .ico { background: var(--gold, #e0a83f); --ico: #1b2538; width: 40px; height: 26px; border-radius: 13px; display: grid; place-items: center; }
  .mailview .mailview-actions .mv-act.mv-sperren, .mailview .mailview-actions .mv-act.mv-loeschen { color: #b4233b; --ico: #b4233b; }
  .mailview .mailview-actions .mv-mehr { display: flex !important; order: 2; }
  /* Die übrigen Aktionen nur, wenn „Mehr" offen ist — als zweite Reihe darüber. */
  .mailview .mailview-actions .mv-act:not(.mv-haupt):not(.mv-mehr) { display: none !important; order: 0; }
  .mailview .mailview-actions.mehr-offen .mv-act:not(.mv-haupt):not(.mv-mehr) { display: flex !important; }
  .mailview .mailview-actions .mv-umbruch { order: 1; }
  .mailview .mailview-actions.mehr-offen .mv-umbruch { display: block; order: 1; flex: 0 0 100%; height: 1px; background: #eef0f4; margin: 2px 4px; }
  .mailview .mailview-actions.mehr-offen .mv-mehr { color: var(--brand-text, #8a5a00); --ico: var(--brand-text, #8a5a00); }
  .mail-readpane2 .mailview.inline .mailview-scroll { padding-bottom: 84px; }
}
@media (max-width: 560px) { .mailview .mailview-actions:not(.mehr-offen) .mv-umbruch { display: none !important; } }

/* ---- v495: Auftragsbestätigung vor Ort (Kunde unterschreibt auf dem Tablet) ---- */
.ab-vorort .ab-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f6f7f9; margin-bottom: 12px; }
.ab-vorort .ab-kopf small { display: block; color: #6b7385; font-size: 12px; }
.ab-vorort .ab-kopf b { font-size: 15px; }
.ab-vorort .ab-summe { font-weight: 800; font-size: 18px; white-space: nowrap; }
.ab-vorort .ab-summe small { display: inline; font-weight: 600; }
.ab-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-chips button { height: 32px; padding: 0 11px; border-radius: 16px; border: 1px solid #d6dbe3; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.ab-chips button.an { background: #1b2538; border-color: #1b2538; color: #fff; }
.ab-betrag { margin-top: 6px; font-size: 13px; font-weight: 700; color: #8a5a00; }
.ab-sign-hg { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .55); display: flex; align-items: stretch; justify-content: center; }
.ab-sign { background: #fff; width: min(820px, 100%); max-height: 100dvh; overflow-y: auto; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 821px) { .ab-sign-hg { align-items: center; padding: 20px; } .ab-sign { border-radius: 18px; max-height: calc(100dvh - 40px); } }
.ab-sign-titel { display: flex; align-items: center; justify-content: space-between; }
.ab-sign-titel h2 { margin: 0; font-size: 20px; }
.ab-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid #d6dbe3; background: #fff; font-size: 16px; cursor: pointer; }
.ab-eck { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ab-eck > div { background: #f6f7f9; border-radius: 11px; padding: 8px 10px; min-width: 0; }
.ab-eck small { display: block; font-size: 11px; color: #6b7385; }
.ab-eck b { font-size: 14px; overflow-wrap: anywhere; }
.ab-zustimmung { margin: 0; font-size: 13.5px; line-height: 1.45; background: #fbefd4; border-radius: 11px; padding: 10px 12px; }
.ab-sign .sigpad { width: 100%; border: 2px dashed #b9c2d0; border-radius: 14px; background: #fcfcfd; touch-action: none; display: block; }
.ab-knoepfe { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn.ab-los { background: #2f9e62; border-color: #2f9e62; color: #fff; font-weight: 800; }
.ab-ok { text-align: center; padding: 8px 0; }
.ab-haken { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: #2f9e62; color: #fff; display: grid; place-items: center; font-size: 32px; font-weight: 800; }
@media (max-width: 560px) {
  .ab-sign { padding: 12px 12px 18px; gap: 9px; }
  .ab-sign-titel h2 { font-size: 17px; }
  .ab-eck { grid-template-columns: 1fr 1fr; }
  .ab-knoepfe .btn { flex: 1 1 auto; }
}

/* ---- v496: Belegliste wie das Postfach — jeder Beleg eine eigene Karte ----
   Wunsch: „übersichtlicher und getrennt voneinander wie beim Postfach". Gilt für Angebote,
   Auftragsbestätigungen und Rechnungen (dieselbe Liste). Links ein Farbstreifen nach Status,
   davor ein Kreis mit dem Anfangsbuchstaben des Kunden. */
.rech-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--av, #3d6be0) 14%, transparent); color: var(--av, #3d6be0); font-weight: 800; font-size: 13px; }
tr.rech-karte { --st: #c9d0db; }
tr.rech-karte.rech-st-offen, tr.rech-karte.rech-st-verschickt, tr.rech-karte.rech-st-versendet, tr.rech-karte.rech-st-teilberechnet,
tr.rech-karte.rech-st-teilbezahlt, tr.rech-karte.rech-st-angemahnt, tr.rech-karte.rech-st-festgeschrieben { --st: #e6a100; }
tr.rech-karte.rech-st-angenommen, tr.rech-karte.rech-st-berechnet, tr.rech-karte.rech-st-bezahlt { --st: #1ea672; }
tr.rech-karte.rech-st-ueberfaellig, tr.rech-karte.rech-st-abgelehnt { --st: #e0455e; }
tr.rech-karte.rech-st-storniert { --st: #9aa3b2; }
@media (min-width: 701px) {
  table.rech-tabelle { border-collapse: separate; border-spacing: 0 7px; margin-top: -7px; }
  table.rech-tabelle thead th { border: 0 !important; padding-bottom: 0 !important; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  table.rech-tabelle tbody tr.rech-karte td { background: var(--card); border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
    padding-top: 11px !important; padding-bottom: 11px !important; transition: background .12s, box-shadow .12s; }
  table.rech-tabelle tbody tr.rech-karte td:first-child { border-left: 4px solid var(--st) !important; border-radius: 12px 0 0 12px; padding-left: 14px !important; }
  table.rech-tabelle tbody tr.rech-karte td:last-child { border-right: 1px solid var(--line) !important; border-radius: 0 12px 12px 0; padding-right: 12px !important; }
  table.rech-tabelle tbody tr.rech-karte:hover td { background: color-mix(in srgb, var(--st) 6%, var(--card)); }
  table.rech-tabelle tbody tr.rech-karte:hover td:first-child { box-shadow: inset 3px 0 0 var(--st); }
  table.rech-tabelle tbody tr:not(.rech-monat):hover { background: transparent; }
  table.rech-tabelle tr.rech-monat td { padding: 16px 4px 2px !important; border: 0 !important; background: transparent !important; }
}
@media (max-width: 700px) {
  table.rech-tabelle tr.rech-karte { border-left: 4px solid var(--st); }
  .rech-avatar { width: 26px; height: 26px; font-size: 12px; }
}

/* ---- v500: Konto & Abmelden auf der Menü-Seite (Handy/Tablet) ---- */
.hm-konto-wer { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px; }
.hm-konto-wer b { display: block; font-size: 14.5px; }
.hm-konto-wer small { display: block; color: var(--muted); font-size: 12px; }
.hm-zeile.hm-abmelden .hm-name, .hm-zeile.hm-abmelden .hm-sym { color: #c8394f; font-weight: 700; }

/* MyHammer-Aufträge in „Anfragen" (15.10.2026): Logo + Name als Kennzeichen vor dem Titel */
.mh-marke { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 9px 3px 4px; border-radius: 20px; background: #fff1e6; color: #c24e00; border: 1px solid #ffd2ad; }
.mh-marke img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; background: #fff; }

/* Kunden-Board, Vorschlag I (16.10.2026): größere Karten mit Details, Ampel und Beträgen */
.kanban-gross .kan-col { flex: 0 0 300px; max-height: 76vh; }
.kanban-gross .kan-head { gap: 8px; }
.kanban-gross .kan-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kan-head-rechts { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.kan-summe { font-size: 11.5px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; }
.kan-card.kan-gross { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 12px 10px 14px; border-radius: 12px; border-left: 4px solid var(--ampel, #E2E8F0); }
.kan-card.kan-gross .cust-name { font-size: 15.5px; font-weight: 800; line-height: 1.25; color: #111827; }
.kan-kopf { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.kan-ampel { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ampel) 14%, #fff); color: color-mix(in srgb, var(--ampel) 70%, #111827); font-size: 11px; font-weight: 800; white-space: nowrap; }
.kan-ampel i { width: 7px; height: 7px; border-radius: 50%; background: var(--ampel); }
.kan-zeile { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.35; color: #475569; text-decoration: none; border-radius: 6px; padding: 1px 2px; margin: 0 -2px; overflow-wrap: anywhere; }
.kan-zeile .ico { flex: none; margin-top: 1px; color: #94A3B8; }
a.kan-zeile:hover { color: #1D4ED8; background: #F1F5FF; }
a.kan-zeile:hover .ico { color: #1D4ED8; }
.kan-zeile.leer { color: #A0A7B5; font-style: italic; }
.kan-beleg { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding: 6px 8px; border-radius: 8px; background: #F8FAFC; font-size: 12px; color: #334155; }
.kan-beleg > span:not(.ico) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kan-beleg > .ico { flex: none; color: #94A3B8; }
.kan-beleg b { font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.kan-taten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.kan-tat { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 4px; border-radius: 9px; border: 1px solid #E2E8F0; background: #FFFFFF; color: #111827; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.kan-tat:hover { background: #FFF7DB; border-color: #FDB913; }
.kan-tat.aus { color: #B4BAC6; background: #F8FAFC; cursor: not-allowed; }
.kan-card.kan-gross .kan-statussel { margin-top: 4px; }
@media (max-width: 560px) { .kanban-gross .kan-col { flex-basis: 86vw; } }

/* Kundenliste neu (16.10.2026): Chips, Buchstaben-Abschnitte, feste Spalten */
.kl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kl-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #E5E7EB; background: #FFFFFF; color: #374151; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.kl-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--kl-f, #94a3b8); }
.kl-chip b { font-weight: 800; color: #6B7280; font-variant-numeric: tabular-nums; }
.kl-chip:hover { border-color: #FDB913; }
.kl-chip.aktiv { background: #111827; border-color: #111827; color: #FFFFFF; }
.kl-chip.aktiv b { color: #FDB913; }
.kl-liste { display: flex; flex-direction: column; border: 1px solid #E7E5E0; border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.kl-zeile { display: grid; grid-template-columns: minmax(220px, 2.1fr) minmax(200px, 1.7fr) minmax(150px, 1.3fr) 140px minmax(150px, 1fr) 196px; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid #F0EEE9; cursor: pointer; transition: background-color .12s; }
.kl-zeile:hover { background: #FFFBEF; }
.kl-zeile:focus-visible { outline: 2px solid #FDB913; outline-offset: -2px; }
.kl-kopf { position: sticky; top: 0; z-index: 1; border-top: 0; background: #F8F7F3; cursor: default; padding-top: 9px; padding-bottom: 9px; }
.kl-kopf:hover { background: #F8F7F3; }
.kl-th { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; text-align: left; }
.kl-sort { cursor: pointer; }
.kl-sort:hover, .kl-sort.aktiv { color: #8A5A00; }
.kl-buchstabe { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; border-top: 1px solid #F0EEE9; background: #FFFFFF; }
.kl-buchstabe span { font-size: 18px; font-weight: 800; color: #111827; }
.kl-buchstabe small { font-size: 11.5px; color: #9CA3AF; font-weight: 700; }
.kl-kunde { display: flex; align-items: center; gap: 11px; min-width: 0; }
.kl-kreis { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }
.kl-name { display: flex; flex-direction: column; min-width: 0; }
.kl-name b { font-size: 14px; font-weight: 800; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-name small { font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kontakt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kl-kontakt a, .kl-kontakt .kl-leer { display: flex; align-items: center; gap: 6px; font-size: 12.5px; text-decoration: none; min-width: 0; }
.kl-kontakt a { color: #1D4ED8; }
.kl-kontakt a span, .kl-kontakt .kl-leer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-kontakt .ico { flex: none; color: #94A3B8; }
.kl-kontakt a:hover span { text-decoration: underline; }
.kl-leer { color: #B4BAC6; }
.kl-ort { min-width: 0; font-size: 12.5px; }
.kl-ort a { color: #374151; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kl-ort a:hover { color: #1D4ED8; text-decoration: underline; }
.kl-beleg > span:not(.kl-leer) { display: flex; flex-direction: column; }
.kl-beleg small { font-size: 11px; color: #6B7280; }
.kl-beleg b { font-size: 13.5px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.kl-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.kl-pille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: color-mix(in srgb, var(--kl-f) 16%, #fff); color: color-mix(in srgb, var(--kl-f) 60%, #111827); }
.kl-pille i { width: 7px; height: 7px; border-radius: 50%; background: var(--kl-f); }
.kl-pille.ohne { background: #F3F4F6; color: #9CA3AF; }
.kl-ampel { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--ampel) 70%, #111827); background: color-mix(in srgb, var(--ampel) 14%, #fff); }
.kl-taten { display: flex; gap: 5px; justify-content: flex-end; }
.kl-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid #E5E7EB; background: #FFFFFF; color: #374151; cursor: pointer; text-decoration: none; transition: background-color .12s, border-color .12s; }
.kl-btn:hover { background: #FFF7DB; border-color: #FDB913; color: #111827; }
.kl-btn.aus { color: #D1D5DB; background: #FAFAFA; cursor: not-allowed; }
@media (max-width: 1100px) {
  .kl-zeile { grid-template-columns: minmax(200px, 2fr) minmax(180px, 1.6fr) 120px minmax(130px, 1fr) 196px; }
  .kl-ort { display: none; }
  .kl-kopf .kl-th:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .kl-kopf { display: none; }
  .kl-zeile { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px; }
  .kl-kunde { grid-column: 1 / -1; }
  .kl-kontakt { grid-column: 1 / -1; }
  .kl-beleg { grid-column: 1; }
  .kl-status { grid-column: 2; justify-content: flex-end; }
  .kl-taten { grid-column: 1 / -1; justify-content: flex-start; }
}
/* Kundenliste: Zeilen deutlich abgetrennt (16.10.2026, Wunsch „besser abtrennen") —
   jede Zeile eine eigene weiße Karte mit Rahmen und Abstand, Buchstaben-Abschnitte mit Linie. */
.kl-liste { gap: 6px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.kl-zeile { border: 1px solid #E5E2DA; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
.kl-zeile:hover { background: #FFFBEF; border-color: #F5D27A; }
.kl-kopf { border: 0; border-radius: 10px; background: #EFEDE7; box-shadow: none; }
.kl-kopf:hover { background: #EFEDE7; }
.kl-buchstabe { border: 0; background: transparent; padding: 16px 4px 4px; border-bottom: 2px solid #FDB913; margin-bottom: 2px; }
.kl-buchstabe span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 8px; background: #111827; color: #FDB913; font-size: 15px; }

/* Rechnungen › Übersicht neu (16.10.2026) */
.rd { display: flex; flex-direction: column; gap: 14px; }
.rd-qas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.rd-qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 8px; border-radius: 14px; border: 1px solid #ECEEF3; background: #FFFFFF; color: #1C2434; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, transform .15s; }
.rd-qa .ico { color: var(--brand); }
.rd-qa:hover { border-color: #FDB913; transform: translateY(-2px); }
.rd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; }
.rd-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid #ECEEF3; border-top: 4px solid var(--rd-f); background: #FFFFFF; }
.rd-kpi-label { font-size: 12.5px; color: #6B7280; font-weight: 600; }
.rd-kpi b { font-size: 26px; font-weight: 800; color: #111827; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rd-pille { align-self: flex-start; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #F3F4F6; color: #4B5563; white-space: nowrap; }
.rd-pille.gut { background: #DCFCE7; color: #166534; }
.rd-pille.schlecht { background: #FEE2E2; color: #991B1B; }
.rd-pille.warn { background: #FEF3C7; color: #92400E; }
.rd-pille.gold { background: #FFF4D1; color: #8A5A00; }
.rd-karte { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; border: 1px solid #ECEEF3; background: #FFFFFF; min-width: 0; }
.rd-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rd-karte h3 { margin: 0; font-size: 16px; font-weight: 800; color: #111827; }
.rd-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; }
.rd-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.rd-legende i.linie { width: 14px; height: 2px; background: #111827; border-radius: 1px; }
.rd-diagramm { overflow-x: auto; }
.rd-diagramm svg { display: block; width: 100%; min-width: 560px; height: auto; }
.rd-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.rd-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; border: 0; border-top: 1px solid #F0EEE9; background: none; font: inherit; text-align: left; color: #111827; cursor: pointer; border-radius: 8px; }
.rd-zeile:hover { background: #FFFBEF; }
.rd-zeile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rd-zeile-text b { font-size: 13.5px; font-weight: 700; }
.rd-zeile-text small { font-size: 12px; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-betrag { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-ust { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid #F0EEE9; font-size: 13.5px; color: #374151; }
.rd-ust b { font-variant-numeric: tabular-nums; color: #111827; }
.rd-ust.summe { border-top: 2px solid #111827; font-weight: 800; font-size: 15px; }
.rd-ust.summe b { color: #B45309; }
.rd-leer { margin: 4px 0 0; font-size: 12.5px; color: #8A92A6; }
.rd-link { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: #8A5A00; cursor: pointer; }
.rd-werkzeuge { margin: 8px 0 0; font-size: 16px; font-weight: 800; color: #111827; }

/* Lieferanten nach Kategorien (17.10.2026) */
.lief-chips { margin-top: 2px; }
.lief-chips .kl-chip .ico { color: #8A5A00; }
.lief-chips .kl-chip.aktiv .ico { color: #FDB913; }
.lief-gruppen { display: flex; flex-direction: column; gap: 14px; }
.lief-abschnitt { display: flex; flex-direction: column; gap: 10px; }
.lief-kopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 2px 8px; border: 0; border-bottom: 2px solid #FDB913; background: none; font: inherit; text-align: left; color: #111827; cursor: pointer; }
.lief-kopf b { font-size: 15px; font-weight: 800; }
.lief-kopf-sym { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #111827; color: #FDB913; --ico: #FDB913; }
.lief-kopf-zahl { padding: 1px 9px; border-radius: 999px; background: #F3F4F6; font-size: 12px; font-weight: 800; color: #4B5563; }
.lief-kopf-pfeil { margin-left: auto; transition: transform .2s; color: #6B7280; }
.lief-abschnitt.zu .lief-kopf-pfeil { transform: rotate(-90deg); }
.lief-abschnitt.zu > .doc-grid { display: none; }
.lief-gruppen.als-liste .doc-grid { display: block; }
.lief-gruppen.als-liste .sup-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 6px; }
.lief-gruppen.als-liste .sup-head { flex: 0 0 auto; margin: 0; min-width: 200px; }
.lief-gruppen.als-liste .sup-line { margin: 0; font-size: 13px; color: var(--muted); }
.lief-gruppen.als-liste .sup-actions { margin-left: auto; margin-top: 0; flex: 0 0 auto; }
.lief-gruppen.als-liste .sup-tag { display: none; }
.sup-doppelt { flex: none; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 11px; font-weight: 800; }

/* Ausführung schöner (17.10.2026): Wochentage, Wochenenden, heute gold, Zusammenfassung, ziehbare ungeplante Projekte */
.ex-dayhead { position: relative; z-index: 1; }
.ex-day { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.ex-day b { font-size: 12px; font-weight: 700; color: #374151; }
.ex-day small { font-size: 9.5px; color: #9CA3AF; font-weight: 600; }
.ex-day.we { background: #F6F4EF; }
.ex-day.today { background: #FDB913 !important; border-radius: 8px 8px 0 0; }
.ex-day.today b, .ex-day.today small { color: #111827; }
.ex-spalten { position: absolute; inset: 0; display: flex; z-index: 0; pointer-events: none; }
.ex-spalten i { flex: none; border-right: 1px solid #F0EEE9; box-sizing: border-box; }
.ex-spalten i.we { background: #FAF8F3; }
.ex-spalten i.today { background: rgba(253, 185, 19, .12); box-shadow: inset 2px 0 0 #FDB913, inset -2px 0 0 #FDB913; }
.ex-inner .ex-row { position: relative; z-index: 1; }
.ex-inner.ex-drop { outline: 2px dashed #F59E0B; outline-offset: -2px; background: rgba(253, 185, 19, .06); }
.ex-leer { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 26px 16px; text-align: center; color: #6B7280; font-size: 13px; }
.ex-leer b { font-size: 15px; color: #111827; }
.ex-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.ex-kpi { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ECEAE4; background: #FFFFFF; }
.ex-kpi b { font-size: 24px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.ex-kpi span { font-size: 12.5px; color: #6B7280; font-weight: 600; }
.ex-kpi.gold { border-top: 3px solid #FDB913; }
.ex-kpi.warn { background: #FFFBEB; border-color: #FCD34D; }
.ex-kpi.warn b { color: #B45309; }
.ex-ungeplant { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #FFFBEB; border: 1px solid #FCD34D; }
.ex-ungeplant-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ex-ungeplant-kopf b { font-size: 14px; color: #92400E; }
.ex-ungeplant-kopf span { font-size: 12px; color: #B45309; }
.ex-ungeplant-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-ungeplant-karte { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed #F59E0B; background: #FFFFFF; cursor: grab; max-width: 260px; }
.ex-ungeplant-karte b { font-size: 13px; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-ungeplant-karte small { font-size: 11.5px; color: #92400E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-ungeplant-karte:hover { border-style: solid; }
.ex-ungeplant-karte.zieht { opacity: .5; }

/* Lieferanten als Liste (17.10.2026, „mach mal sauber"): Die Karte blieb eine senkrechte Spalte und wurde
   mittig ausgerichtet — jeder Eintrag stand zentriert und kachelhoch. Jetzt eine echte Tabellenzeile mit
   festen Spalten; fehlt eine Angabe, bleibt ihre Zelle leer statt dass alles nachrückt. */
.lief-gruppen.als-liste .doc-grid { display: flex; flex-direction: column; border: 1px solid #ECEAE4; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.lief-gruppen.als-liste .sup-card { display: grid; grid-template-columns: minmax(200px, 1.15fr) minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1.3fr) auto; align-items: center; gap: 2px 18px; flex-direction: row; margin: 0; padding: 9px 14px; border: 0; border-bottom: 1px solid #F0EEE9; border-radius: 0; box-shadow: none; min-height: 0; }
.lief-gruppen.als-liste .sup-card:last-child { border-bottom: 0; }
.lief-gruppen.als-liste .sup-card:hover { background: #FFFBEF; }
.lief-gruppen.als-liste .sup-head { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; }
.lief-gruppen.als-liste .sup-ava { width: 28px; height: 28px; font-size: 13px; }
.lief-gruppen.als-liste .sup-name { font-size: 14.5px; }
.lief-gruppen.als-liste .sup-adr { grid-column: 2; grid-row: 1; }
.lief-gruppen.als-liste .sup-tel { grid-column: 3; grid-row: 1; }
.lief-gruppen.als-liste .sup-mail { grid-column: 4; grid-row: 1; }
.lief-gruppen.als-liste .sup-line { margin: 0; font-size: 13px; color: #4B5563; }
.lief-gruppen.als-liste .sup-frei { grid-column: 2 / span 3; grid-row: 2; font-size: 12px !important; }
.lief-gruppen.als-liste .sup-line.hint, .lief-gruppen.als-liste .sup-tag { display: none; }
.lief-gruppen.als-liste .sup-actions { grid-column: 5; grid-row: 1; margin: 0; gap: 6px; justify-content: flex-end; }
.lief-gruppen.als-liste .sup-actions .btn { padding: 5px 9px; }
@media (max-width: 1100px) { .lief-gruppen.als-liste .sup-actions .btn span { display: none; } }
@media (max-width: 760px) {
  .lief-gruppen.als-liste .sup-card { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
  .lief-gruppen.als-liste .sup-adr, .lief-gruppen.als-liste .sup-tel, .lief-gruppen.als-liste .sup-mail, .lief-gruppen.als-liste .sup-frei { grid-column: 1 / -1; grid-row: auto; }
  .lief-gruppen.als-liste .sup-actions { grid-column: 2; }
}

/* Monatsübersicht neu (17.10.2026) */
.mo-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mo-kopf > :first-child { margin-right: auto; }
.mo-nav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: #F3F4F6; }
.mo-pfeil { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #FFFFFF; font-size: 20px; line-height: 1; color: #111827; cursor: pointer; box-shadow: 0 1px 2px rgba(17, 24, 39, .08); }
.mo-pfeil:hover { background: #FDB913; }
.mo-monat { min-width: 132px; text-align: center; font-size: 15px; font-weight: 800; color: #111827; }
.mo-heute { border: 0; background: none; padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: #B45309; cursor: pointer; }
.mo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.mo-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 15px; border-radius: 14px; border: 1px solid #ECEAE4; background: #FFFFFF; }
.mo-kpi b { font-size: 22px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.mo-kpi span { font-size: 12.5px; font-weight: 600; color: #6B7280; }
.mo-kpi.gold { border-top: 3px solid #FDB913; }
.mo-kpi.dunkel { background: #111827; border-color: #111827; }
.mo-kpi.dunkel b { color: #FDB913; }
.mo-kpi.dunkel span { color: #D1D5DB; }
.mo-kpi.warn { background: #FFFBEB; border-color: #FCD34D; }
.mo-kpi.warn b { color: #B45309; }
.mo-kpi.gut b { color: #16A34A; }
.mo-kpi.schlecht { background: #FEF2F2; border-color: #FECACA; }
.mo-kpi.schlecht b { color: #DC2626; }
.mo-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 12px; }
.mo-karte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #ECEAE4; border-radius: 16px; background: #FFFFFF; font: inherit; text-align: left; color: #111827; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mo-karte:hover { border-color: #FDB913; box-shadow: 0 6px 18px rgba(17, 24, 39, .07); }
.mo-karte:focus-visible { outline: 2px solid #FDB913; outline-offset: 2px; }
.mo-karte.ruhig { background: #FAFAF9; }
.mo-karte.ruhig .mo-stunden b, .mo-karte.ruhig .mo-lohn { color: #9CA3AF; }
.mo-karte.inaktiv { opacity: .55; }
.mo-karte-kopf { display: flex; align-items: center; gap: 10px; }
.mo-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 13.5px; font-weight: 800; }
.mo-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mo-name b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-name small { font-size: 12px; color: #6B7280; }
.mo-stunden { display: flex; align-items: baseline; gap: 6px; }
.mo-stunden b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mo-stunden span { font-size: 13px; color: #6B7280; font-weight: 600; }
.mo-spur { height: 8px; border-radius: 4px; background: #F3F4F6; overflow: hidden; }
.mo-spur i { display: block; height: 100%; border-radius: 4px; background: #FDB913; }
.mo-spur i.ueber { background: #16A34A; }
.mo-zahlen { display: flex; gap: 14px; font-size: 12.5px; color: #6B7280; }
.mo-zahlen b { color: #111827; font-variant-numeric: tabular-nums; }
.mo-zahlen .urlaub b { color: #2563EB; }
.mo-zahlen .krank b { color: #DC2626; }
.mo-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #F0EEE9; }
.mo-lohn { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-marke { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #F3F4F6; color: #6B7280; white-space: nowrap; }
.mo-marke.gut { background: #DCFCE7; color: #166534; }
.mo-marke.warn { background: #FEF3C7; color: #92400E; }
.mo-marke.schlecht { background: #FEE2E2; color: #991B1B; }

/* 17.10.2026 — Dokument-Symbol, Belegliste in festen Spalten, erledigte Anfragen kompakt, Themen sauber */
.ico.datei-ic { display: inline-flex; flex: none; }
.ico.datei-ic svg { display: block; }
.doc-tile-ic .ico.datei-ic svg { width: 28px; height: 28px; }
.firm-docrow .doc-tile-ic .ico.datei-ic svg, .firm-list .doc-tile-ic .ico.datei-ic svg { width: 26px; height: 26px; }
@media (min-width: 701px) {
  /* Jede Zeile war ein eigenes Raster mit „auto"-Spalten → Symbole und „admin" standen je Zeile woanders.
     Jetzt feste Breiten: Betrag | Symbole | Hochgeladen von — alles fluchtet untereinander. */
  .firm-list .firm-doc { grid-template-columns: minmax(0, 1fr) 216px 190px; padding: 9px 8px; }
  .firm-list.mit-betrag .firm-doc { grid-template-columns: minmax(0, 1fr) 104px 216px 190px; }
  .firm-list .firm-doc > .firm-doc-ctrls { justify-content: flex-end; }
  .firm-list .firm-doc > .by-badge { justify-self: start; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
  .firm-list .firm-doc { padding: 10px 12px; }
}
/* „besser getrennt": jeder Beleg ein eigener Kasten mit Abstand zum nächsten */
.firm-list { gap: 6px; }
.firm-list .firm-doc, .firm-list .firm-doc:last-child { border: 1px solid #E7E4DC !important; border-radius: 10px !important; background: #FFFFFF; }
.firm-list .firm-doc:hover { border-color: #FDB913 !important; background: #FFFCF3; }
.firm-list .firm-doc .firm-doc-name { font-size: 13.5px; }
.anf-erl-liste { border: 1px solid #ECEAE4; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.anf-erl { border-bottom: 1px solid #F0EEE9; }
.anf-erl:last-child { border-bottom: 0; }
.anf-erl-zeile { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto auto 18px; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13.5px; }
.anf-erl-zeile::-webkit-details-marker { display: none; }
.anf-erl-zeile:hover { background: #FFFBEF; }
.anf-erl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #111827; }
.anf-erl-leistung, .anf-erl-kontakt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7280; }
.anf-erl-datum { color: #6B7280; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anf-erl-stand { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #F3F4F6; color: #6B7280; }
.anf-erl-stand.kunde { background: #DCFCE7; color: #166534; }
.anf-erl-pfeil { color: #9CA3AF; transition: transform .15s; display: inline-flex; }
.anf-erl[open] .anf-erl-pfeil { transform: rotate(180deg); }
.anf-erl[open] .anf-erl-zeile { background: #FAFAF8; }
.anf-erl-inhalt { padding: 4px 16px 14px; }
@media (max-width: 700px) {
  .anf-erl-zeile { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 4px 10px; }
  .anf-erl-leistung, .anf-erl-kontakt { display: none; }
  .anf-erl-datum { grid-column: 1; grid-row: 2; }
}
.th-kachel .th-inhalt { align-self: stretch; }
.th-kachel .pj-minis { margin-top: auto !important; padding-top: 4px; }
.th-kachel { align-items: stretch !important; }
.th-kacheln .bilanz-kachel:last-child b { font-size: 18px; line-height: 1.3; }

/* Themen — Vorschlag B (17.10.2026): Kategorien als Reiter oben, Karten mit großem Logo, alle gleich gebaut */
.th-arbeitsflaeche { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
.th-arbeitsflaeche > .th-ordner { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; position: static; max-height: none; overflow: visible; padding: 0; border: 0; background: none; margin: 0; }
.th-ordnerklapp { display: none !important; }
.th-ordner .th-ordnerzeile { width: auto; gap: 7px; padding: 7px 13px; border: 1px solid #E7E4DC; border-radius: 999px; background: #FFFFFF; font-size: 13px; font-weight: 600; color: #111827; box-shadow: none !important; }
.th-ordner .th-ordnerzeile:hover { border-color: #FDB913; background: #FFFCF3; }
.th-ordner .th-ordnerzeile.aktiv { background: #111827; border-color: #111827; color: #FFFFFF; }
.th-ordner .th-ordnername { flex: none; }
.th-ordner .th-ordnerzahl { background: #F3F4F6; color: #4B5563; font-weight: 700; }
.th-ordner .th-ordnerzeile.aktiv .th-ordnerzahl { background: rgba(255, 255, 255, .16); color: #FDB913; }
.th-ordner .th-ordnerzeile.alle .th-ordnerpunkt { display: none; }
.th-ordner .th-unterordner { order: 50; flex: 1 0 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; border-left: 0; border-top: 1px dashed #E7E4DC; }
.th-ordner .th-unterordner .th-ordnerzeile { font-size: 12.5px; padding: 5px 11px; font-weight: 500; }
.th-ordner .th-ordnerneu { order: 40; margin: 0; padding: 7px 13px; border-radius: 999px; }
.th-ordnerkopf { border: 0 !important; background: none !important; padding: 0 !important; }
.th-raster { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)) !important; gap: 14px !important; }
.th-raster .th-kachel.th-k2 { display: flex !important; flex-direction: column; gap: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid #E7E4DC; border-radius: 16px; background: #FFFFFF; transition: border-color .15s, box-shadow .15s, transform .15s; }
.th-raster .th-kachel.th-k2:hover { border-color: #FDB913; box-shadow: 0 10px 24px rgba(17, 24, 39, .08); transform: translateY(-2px); }
.th-raster .th-kachel.th-k2:focus-visible { outline: 2px solid #FDB913; outline-offset: 2px; }
.th-k2-cover { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--thf) 13%, #FFFFFF); border-bottom: 1px solid color-mix(in srgb, var(--thf) 16%, #FFFFFF); overflow: hidden; }
.th-k2-sym { display: inline-flex; }
.th-k2-sym svg { width: 36px !important; height: 36px !important; }
.th-k2-cover:has(.th-k2-logobox) .th-k2-sym { display: none; }
.th-k2-logobox { display: flex; align-items: center; justify-content: center; width: 132px; height: 62px; padding: 8px 12px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 3px rgba(17, 24, 39, .1); }
.th-k2-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.th-k2-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.th-k2-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 10px; }
.th-k2 .th-titel { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-k2-kat { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--thf) 72%, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-k2-notiz { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #6B7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-k2-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-top: 1px solid #F0EEE9; background: #FCFBF8; font-size: 12px; font-weight: 600; color: #374151; }
.th-k2-inhalt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-k2-inhalt.leer { color: #9CA3AF; font-weight: 500; }
.th-k2-datum { flex: none; color: #9CA3AF; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .th-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .th-k2-cover { height: 78px; }
  .th-k2-logobox { width: 104px; height: 50px; }
  .th-k2-text { padding: 10px 11px 8px; }
  .th-k2-fuss { padding: 8px 11px; font-size: 11.5px; }
}

/* Kalender: Farbe kommt als --c (17.10.2026); das klassische Design bleibt vollfarbig */
.kpill, .kbar { background: var(--c, #2f6fed); }

/* Termin-Symbol je Art (17.10.2026) */
.kpill-ico { display: inline-flex; vertical-align: -2px; margin-right: 4px; --ico: currentColor; }
.kpill-ico svg { width: 12px; height: 12px; stroke-width: 2.4; }
.cal-liste-ico { display: inline-flex; vertical-align: -3px; margin-right: 7px; --ico: var(--farbe, #2f6fed); }

/* ===== Kamera-Scanner wie Adobe Scan (17.10.2026) ===== */
.cs-root [hidden] { display: none !important; }
.cs-kamera { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cs-root .camscan-tool.on { background: #FDB913; border-color: #FDB913; color: #111827; }
.cs-root .camscan-hint { bottom: 22px; font-weight: 700; }
.cs-root .camscan-done { background: #FDB913; color: #111827; }
.cs-root .camscan-done:disabled { background: #3a3a3a; color: #999; }
.cs-root .camscan-ov.camscan-flash { animation: csBlitz .22s ease; }
@keyframes csBlitz { 0% { background: rgba(255, 255, 255, .85); } 100% { background: transparent; } }
.cs-stapel { justify-self: start; position: relative; width: 52px; height: 64px; padding: 0; border: 2px solid #FFFFFF; border-radius: 8px; background: #222; overflow: visible; cursor: pointer; }
.cs-stapel.leer { border-color: rgba(255, 255, 255, .25); cursor: default; }
.cs-stapel img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.cs-stapel-zahl { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #FDB913; color: #111827; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-pruef, .cs-zuschnitt { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0B0F17; color: #FFFFFF; }
.cs-pruef-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
.cs-pruef-kopf b { font-size: 15px; }
.cs-kopf-knopf { border: 0; background: rgba(255, 255, 255, .1); color: #FFFFFF; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-speichern { border: 0; background: #FDB913; color: #111827; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.cs-pruef-bild { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 14px; }
.cs-pruef-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); background: #FFFFFF; }
.cs-filter { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
.cs-filter-knopf { flex: none; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: #FFFFFF; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cs-filter-knopf.an { background: #FDB913; border-color: #FDB913; color: #111827; }
.cs-werkzeuge { display: flex; justify-content: space-around; gap: 4px; padding: 6px 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.cs-werkzeug { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; color: #FFFFFF; font: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 2px; cursor: pointer; --ico: #FFFFFF; border-radius: 10px; }
.cs-werkzeug:hover { background: rgba(255, 255, 255, .08); }
.cs-werkzeug.gefahr { color: #FCA5A5; --ico: #FCA5A5; }
.cs-streifen { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
.cs-seite { position: relative; flex: none; width: 50px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 7px; background: #222; overflow: hidden; cursor: pointer; }
.cs-seite.an { border-color: #FDB913; }
.cs-seite img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-seite span { position: absolute; left: 3px; bottom: 2px; font-size: 10px; font-weight: 800; color: #FFFFFF; background: rgba(0, 0, 0, .6); border-radius: 4px; padding: 0 4px; }
.cs-seite.neu { border: 2px dashed rgba(255, 255, 255, .35); background: transparent; color: #FFFFFF; font-size: 24px; }
.cs-zuschnitt-flaeche { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
.cs-zuschnitt-cv { touch-action: none; cursor: crosshair; }
.cs-lupe { position: absolute; display: none; width: 140px; height: 140px; border-radius: 50%; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }

/* Termin ↔ Thema (17.10.2026): Logo bzw. Anfangsbuchstabe des Themas vor dem Termin */
.kpill-thema { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-right: 5px; border-radius: 50%; background: var(--thf, #6B7280); color: #FFFFFF; font-weight: 800; line-height: 1; flex: none; }
.kpill-thema-logo { display: inline-block; vertical-align: -3px; margin-right: 5px; border-radius: 4px; object-fit: contain; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(17, 24, 39, .1); }
.cal-liste-ico .kpill-thema, .cal-liste-ico .kpill-thema-logo { margin-right: 0; }

/* Familienbereich verwalten (17.10.2026) */
.th-k2-fam { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #111827; color: #FDB913; font-size: 11.5px; font-weight: 800; --ico: #FDB913; }
.fam-dialog { display: flex; flex-direction: column; gap: 12px; }
.fam-liste { display: flex; flex-direction: column; gap: 8px; }
.fam-zeile { border: 1px solid #E7E4DC; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; }
.fam-zeile.aus { opacity: .6; }
.fam-kopf { display: flex; align-items: center; gap: 10px; }
.fam-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FDB913; color: #111827; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fam-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fam-name small { color: #6B7280; overflow: hidden; text-overflow: ellipsis; }
.fam-stand { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #F3F4F6; color: #4B5563; }
.fam-stand.gut { background: #DCFCE7; color: #166534; }
.fam-stand.warn { background: #FEF3C7; color: #92400E; }
.fam-stand.schlecht { background: #FEE2E2; color: #991B1B; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fam-chip { padding: 2px 9px; border-radius: 999px; background: #F3F4F6; font-size: 12px; font-weight: 600; color: #374151; }
.fam-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-themen { max-height: 260px; overflow-y: auto; border: 1px solid #E7E4DC; border-radius: 10px; padding: 6px 10px; }
.fam-gruppe { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6B7280; margin: 8px 0 2px; }
.fam-thema { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.fam-einladen { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.fam-ok { color: #166534; font-weight: 600; margin: 4px 0; }
.fam-warn { color: #92400E; margin: 4px 0; }
@media (min-width: 701px) { .modal:has(.fam-dialog) { width: 640px; max-width: calc(100vw - 40px); } }

/* Scanner am PC: Datei wählen oder hineinziehen (17.10.2026) */
.cs-root .cs-datei { background: #FFFFFF; color: #111827; border-color: #FFFFFF; }
.cs-ablage { position: absolute; inset: 14px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 3px dashed #FDB913; border-radius: 22px; background: rgba(17, 24, 39, .78); color: #FFFFFF; font-size: 15px; pointer-events: none; z-index: 5; }
.cs-ablage b { font-size: 24px; color: #FDB913; }
.cs-root.cs-zieht .cs-ablage { display: flex; }
/* 17.10.2026: auch am Handy hochladen (Wunsch) — Knopf bleibt überall sichtbar */

/* Scanner: doppelte Rechnung (17.10.2026) */
.scan-doppelt { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #FEF2F2; border: 1px solid #FECACA; color: #7F1D1D; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.scan-doppelt-kopf { display: flex; align-items: center; gap: 6px; --ico: #DC2626; color: #B91C1C; font-size: 14px; }
.scan-doppelt-knoepfe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scan-doppelt-trotzdem { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* Familienbereich: Übersicht auf der Themen-Seite (17.10.2026) */
.fam-uebersicht { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #E7E4DC; border-radius: 14px; background: #FFFFFF; display: flex; flex-direction: column; gap: 8px; }
.fam-ueb-kopf { display: flex; align-items: center; gap: 8px; --ico: #B45309; }
.fam-ueb-kopf b { font-size: 15px; }
.fam-ueb-zeile { display: grid; grid-template-columns: 34px minmax(140px, .9fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #F0EEE9; }
.fam-ueb-zeile.aus { opacity: .55; }
.fam-chip.klick { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.fam-chip.klick:hover { background: #FDB913; color: #111827; }
.th-k2-fam { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .fam-ueb-zeile { grid-template-columns: 34px minmax(0, 1fr); }
  .fam-ueb-zeile .fam-chips, .fam-ueb-zeile .fam-stand { grid-column: 2; justify-self: start; }
}

/* ===== E-Mail-Vorlagen ohne KI (17.10.2026) ===== */
.mv-vorlagen-modal { max-width: 620px; }
.mv-vorlagen-modal input[type=search] { width: 100%; margin: 4px 0 10px; }
.mv-vorlagen { display: flex; flex-direction: column; gap: 6px; max-height: min(58vh, 520px); overflow-y: auto; padding-right: 2px; }
.mv-vorlagen-gruppe { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 2px 2px; }
.mv-vorlage { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; font: inherit; cursor: pointer;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: inherit; }
.mv-vorlage:hover, .mv-vorlage:focus-visible { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--card, #fff)); outline: none; }
.mv-vorlage b { font-size: 14px; }
.mv-vorlage small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ===== Kundenkarten (17.10.2026) ===== */
.kk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 10px; }
.kk-zahl { font-size: 19px; font-weight: 800; color: var(--ink); }
.kk-kopf select { width: auto; }
.kk-suche { margin-top: 4px; }
.kk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kk-kachel { position: relative; aspect-ratio: 1.62; border: 0; border-radius: 18px; background: var(--kk, #4b5563); color: var(--kk-text, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; cursor: pointer; font: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 12px -6px rgba(15, 23, 42, .35); overflow: hidden; transition: transform .12s ease; }
.kk-kachel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.kk-kachel:active { transform: scale(.97); }
.kk-kachel:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.kk-gross { font-size: clamp(30px, 7vw, 46px); font-weight: 800; line-height: 1; letter-spacing: .01em; }
.kk-wort .kk-gross { font-size: clamp(18px, 4.6vw, 24px); letter-spacing: .14em; text-transform: uppercase; }
.kk-etikett { max-width: 92%; padding: 4px 12px; border-radius: 999px; background: #fff; color: #111827; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kk-leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 12px; color: var(--muted); --ico: var(--muted); }
.kk-leer h3 { margin: 6px 0 0; color: var(--ink); }
.kk-leer p { max-width: 46ch; margin: 0 0 8px; }

/* Vollbild an der Kasse: weißer Grund (am hellsten), Code so groß wie möglich */
.kk-voll { position: fixed; inset: 0; z-index: 90; background: #fff; color: #111827; display: flex; flex-direction: column; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.kk-voll-kopf { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 14px; background: var(--kk); color: var(--kk-text); }
.kk-zurueck { border: 0; background: rgba(255, 255, 255, .18); color: inherit; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; cursor: pointer; flex: none; }
.kk-voll-name { flex: 1; min-width: 0; font-size: 20px; font-weight: 800; display: flex; flex-direction: column; overflow: hidden; }
.kk-voll-name small { font-size: 13px; font-weight: 600; opacity: .85; }
.kk-bearbeiten { border: 0; background: rgba(255, 255, 255, .22); color: inherit; padding: 9px 14px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.kk-voll-karte { margin: 18px auto 0; width: min(560px, calc(100% - 28px)); display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 18px 22px; border-radius: 22px; background: #fff; box-shadow: 0 2px 14px rgba(15, 23, 42, .12); }
.kk-code { width: 100%; display: flex; justify-content: center; background: #fff; }
.kk-code svg { display: block; width: 100%; height: 150px; }
.kk-code.kk-art-qr svg { width: min(78vw, 300px); height: auto; aspect-ratio: 1; }
.kk-code.kk-art-ean8 svg { width: 70%; }
.kk-nummer { font-size: clamp(19px, 5.4vw, 26px); font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; text-align: center; word-break: break-all; user-select: all; }
.kk-ohne { color: #6b7280; text-align: center; margin: 8px 0 0; }
.kk-seiten { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kk-bild img { display: block; max-width: 100%; max-height: 50vh; border-radius: 12px; margin: 0 auto; }
.kk-tipp { text-align: center; color: #6b7280; font-size: 12.5px; margin: 16px 18px 24px; }

/* Formular */
.kk-form { max-width: 560px; }
.kk-form-kachel { width: min(260px, 70%); margin: 0 auto 12px; }
.kk-form-kachel .kk-kachel { width: 100%; cursor: default; }
.kk-nr-zeile { display: flex; gap: 8px; }
.kk-nr-zeile input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.kk-form-vorschau { margin: -2px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.kk-form-vorschau .kk-code svg { height: 74px; }
.kk-form-vorschau .kk-code.kk-art-qr svg { width: 130px; height: auto; }
.kk-farben { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kk-farben button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.kk-farben button.an { box-shadow: 0 0 0 3px var(--ink); }
.kk-farben input[type=color] { width: 36px; height: 32px; padding: 0 2px; border-radius: 8px; }
.kk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kk-scan-modal { max-width: 480px; }
.kk-sucher { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.kk-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-rahmen { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 3px solid #fdb913; border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
@media (max-width: 560px) {
  .kk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kk-zwei { grid-template-columns: 1fr; }
  .kk-code svg { height: 130px; }
}
/* Kundenkarten: Logos und Markt-Auswahl (17.10.2026) */
.kk-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.kk-logo img { width: 72%; height: 72%; object-fit: contain; }
.kk-mitlogo .kk-gross { font-size: clamp(14px, 3.8vw, 18px); }
.kk-mitlogo.kk-wort .kk-gross { letter-spacing: .08em; }
.kk-logo-kopf { width: 40px; height: 40px; }
.kk-logo-klein { width: 26px; height: 26px; box-shadow: none; border: 1px solid #e5e7eb; }
.kk-markt { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kk-markt[hidden] { display: none; }
.kk-markt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; }
.kk-markt-knopf { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-left: 4px solid var(--kk); border-radius: 10px; background: var(--card, #fff); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; color: inherit; }
.kk-markt-knopf:hover { border-color: var(--kk); }
.kk-markt-punkt { width: 26px; height: 26px; border-radius: 50%; background: var(--kk); flex: none; }

/* ===== Falax-Schreiber (17.10.2026): Ausformulieren / Korrigieren / Zurück im Verfassen-Fenster ===== */
.mail-compose .mc-formbtn { background: linear-gradient(140deg, #fdd34d, #f5a700) !important; color: #111827 !important; border-color: #e0a000 !important; font-weight: 700; }
.mail-compose .mc-formbtn:disabled, .mail-compose .mc-korrbtn:disabled { opacity: .6; cursor: progress; }
.mail-compose .mc-korrbtn { font-weight: 700; }
.mail-compose .mc-zurueck[hidden] { display: none !important; }
.sev-pos .p-besch { position: relative; }
.sev-pos .p-besch .ki-textknopf { position: absolute; right: 6px; top: 6px; }

/* Diktieren überall: schwebender Mikrofon-Knopf, solange ein Textfeld den Fokus hat (17.10.2026) */
.diktier-fab { position: fixed; right: 18px; bottom: 24px; z-index: 95; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: #111827; color: #fff; --ico: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(17, 24, 39, .6); cursor: pointer; }
.diktier-fab[hidden] { display: none; }
.diktier-fab.rec { background: #dc2626; animation: diktierPuls 1.2s ease-in-out infinite; }
@keyframes diktierPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); } }
@media (max-width: 1024px) { .diktier-fab { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); right: 14px; } }
@media (prefers-reduced-motion: reduce) { .diktier-fab.rec { animation: none; } }

/* ===== Sofort spürbares Antippen (18.10.2026) =====
   touch-action: manipulation — keine Wartezeit auf einen möglichen Doppeltipp (Zoomen per Zwei-Finger geht weiter).
   Beim Drücken wird der Knopf sofort etwas dunkler bzw. kleiner, damit man spürt: der Tipp ist angekommen.
   Bewusst filter statt transform für alle Knöpfe — viele sind per transform positioniert und würden springen. */
html { touch-action: manipulation; }
button, .btn, a, [role="button"], label, summary, select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation; }
button:not(:disabled):active, .btn:active, [role="button"]:active, a.card:active { filter: brightness(.9); transition: filter 0s; }
.btn:not(:disabled):active, .kk-kachel:active, .h-leiste-knopf:active, nav.side button:active { transform: scale(.97); transition: transform .04s; }
.mic-btn.mic-startet, .diktier-fab.mic-startet { background: #f59e0b !important; color: #111827 !important; --ico: #111827; }
.mic-btn.mic-aus { opacity: .55; }
@media (pointer: coarse) {
  /* kleine Symbolknöpfe bekommen am Handy eine größere Trefferfläche, ohne größer auszusehen */
  .ki-textknopf, .mic-btn { min-width: 40px; min-height: 40px; }
}