/* ═══════════════════════════════════════════════════════════
   STYLES – Angebots-Tool
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#f5f4f0; --surface:#fff; --surface2:#f0efe9;
  --border:rgba(0,0,0,.10); --border2:rgba(0,0,0,.18);
  --text:#1a1a18; --text2:#6b6b66; --text3:#9a9993;
  --accent:#1a1a18; --accent-fg:#fff;
  --blue-bg:#e6f1fb; --blue:#185fa5;
  --green-bg:#eaf3de; --green:#3b6d11;
  --red-bg:#fcebeb; --red:#a32d2d;
  --amber-bg:#faeeda; --amber:#854f0b;
  --teal-bg:#e1f5ee; --teal:#0f6e56;
  --r:8px; --rl:12px;
}
html,body { height:100%; font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); font-size:14px; }

/* ── Layout ── */
.app    { display:flex; height:100vh; overflow:hidden; }
.main   { flex:1; overflow-y:auto; overflow-x:clip; display:flex; flex-direction:column; align-items:stretch; background:var(--bg); }

/* ── Sidebar ── */
.sidebar { width:300px; background:var(--surface); border-right:.5px solid var(--border2); display:flex; flex-direction:column; flex-shrink:0; }
.sb-head { padding:16px; border-bottom:.5px solid var(--border); }
.sb-head h2 { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.sb-head p  { font-size:11px; color:var(--text2); margin-top:2px; }
.sb-nav-tabs { display:flex; flex-wrap:wrap; border-bottom:.5px solid var(--border2); flex-shrink:0; }
.sb-nav-tab  { flex:0 0 33.333%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px; border:none; border-bottom:2px solid transparent; background:transparent; cursor:pointer; font-size:10px; color:var(--text3); transition:color .12s, background .12s; box-sizing:border-box; }
.sb-nav-tab i { font-size:16px; }
.sb-nav-tab:hover { background:var(--surface2); color:var(--text); }
.sb-nav-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.sb-search { padding:6px 8px 4px; display:flex; align-items:center; gap:6px; border-bottom:.5px solid var(--border); }
.sb-search i { font-size:13px; color:var(--text3); flex-shrink:0; }
.sb-search input { flex:1; padding:5px 7px; border:.5px solid var(--border2); border-radius:var(--r); font-size:12px; background:var(--surface2); color:var(--text); outline:none; }
.sb-search input:focus { border-color:var(--accent); background:var(--surface); }
.sb-offer-act { display:flex; gap:6px; padding:8px 8px 4px; border-bottom:.5px solid var(--border2); }
.sb-act-btn   { flex:1; justify-content:center; font-size:12px; }
.sb-nav  { flex:1; overflow-y:auto; padding:8px; }
.nav-sec { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; padding:12px 8px 4px; }
.nav-empty { padding:12px 8px; font-size:12px; color:var(--text3); }
.nav-item { display:flex; align-items:center; gap:6px; padding:4px 6px 4px 8px; border-radius:var(--r); cursor:pointer; transition:background .12s; margin-bottom:1px; }
.nav-item:hover { background:var(--surface2); }
.nav-item.active { background:transparent; color:inherit; }
.nav-item.active .nav-file-icon { background:var(--accent); border-radius:var(--r); }
.nav-item.active .nav-file-icon i { color:#fff; }
.nav-item.active .ni-main { background:transparent; border:1.5px solid var(--accent); border-radius:var(--r); }
.nav-item i { font-size:15px; flex-shrink:0; }
.nav-file-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border-radius:var(--r); }
.ni-main { display:flex; align-items:center; gap:6px; flex:1; min-width:0; padding:5px 8px; border-radius:var(--r); transition:background .12s; }
.ni-info { flex:1; min-width:0; }
.ni-row  { display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; }
.ni-nr   { font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ni-sub  { font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.ni-meta { font-size:10px; color:var(--text3); white-space:nowrap; flex-shrink:0; }
.sb-foot { padding:4px 4px 6px; border-top:.5px solid var(--border2); }
.sb-foot-grid { display:flex; flex-wrap:wrap; }
.sb-foot-btn { flex:0 0 33.33%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 2px 4px; border:none; border-radius:var(--r); background:transparent; cursor:pointer; font-size:9px; color:var(--text3); transition:color .12s, background .12s; box-sizing:border-box; line-height:1.2; }
.sb-foot-btn i { font-size:14px; }
.sb-foot-btn:hover { background:var(--surface2); color:var(--text); }

/* ── Sticky Offer Header ── */
.offer-sticky-header { position:sticky; top:0; z-index:50; background:var(--bg); }

/* ── Topbar ── */
.topbar { background:var(--surface); border-bottom:.5px solid var(--border2); padding:10px 28px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; width:100%; }
.topbar-left    { display:flex; align-items:center; gap:12px; }
.topbar-title   { font-size:16px; font-weight:600; }
.topbar-actions { display:flex; gap:8px; align-items:center; }
.topbar-sep { width:.5px; height:20px; background:var(--border2); flex-shrink:0; margin:0 2px; }

/* ── Tabs ── */
.tabs { display:flex; border-bottom:.5px solid var(--border2); background:var(--surface); padding:0 28px; flex-shrink:0; width:100%; align-self:stretch; }
.tab  { padding:10px 16px; font-size:13px; font-weight:500; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; transition:color .12s,border-color .12s; margin-bottom:-.5px; }
.tab:hover  { color:var(--text); }
.tab.active { color:var(--text); border-bottom-color:var(--accent); }
.tab i { margin-right:5px; font-size:14px; }

/* ── Content ── */
.content { padding:20px 28px; flex:1; max-width:900px; width:100%; margin:0 auto; }
.content-full { padding:20px 28px; flex:1; width:100%; }
.section { background:var(--surface); border:.5px solid var(--border2); border-radius:var(--rl); padding:16px 20px; margin-bottom:12px; }
.sec-title { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fg3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.ff  { display:flex; flex-direction:column; gap:4px; }
.ff label { font-size:12px; color:var(--text2); }
.ff input,.ff select,.ff textarea { padding:7px 10px; border:.5px solid var(--border2); border-radius:var(--r); font-size:13px; background:var(--surface); color:var(--text); outline:none; transition:border-color .12s; width:100%; }
.ff input:focus,.ff select:focus,.ff textarea:focus { border-color:var(--accent); }
.ff textarea { resize:vertical; min-height:64px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--r); font-size:13px; font-weight:500; cursor:pointer; border:.5px solid var(--border2); background:var(--surface); color:var(--text); transition:background .12s; white-space:nowrap; }
.btn:hover      { background:var(--surface2); }
.btn-primary    { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.btn-primary:hover { background:#333; }
.btn-danger     { background:var(--red-bg); color:var(--red); border-color:rgba(163,45,45,.2); }
.btn-danger:hover  { background:#f7c1c1; }
.del-btn { width:26px; height:26px; border:none; background:transparent; cursor:pointer; border-radius:var(--r); color:var(--text3); display:flex; align-items:center; justify-content:center; font-size:14px; transition:background .12s,color .12s; flex-shrink:0; }
.del-btn:hover { background:var(--red-bg); color:var(--red); }
.wr-drag-target { outline:2px solid var(--accent); outline-offset:-1px; background:var(--surface2) !important; }
.add-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:.5px dashed var(--border2); border-radius:var(--r); background:transparent; cursor:pointer; color:var(--text2); font-size:13px; transition:background .12s; }
.add-btn:hover       { background:var(--surface2); }
.add-btn.teal        { border-color:var(--teal); color:var(--teal); }
.add-btn.teal:hover  { background:var(--teal-bg); }

/* ── Status ── */
.sbadge       { font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; }
.s-entwurf    { background:var(--amber-bg); color:var(--amber); }
.s-versendet  { background:var(--blue-bg);  color:var(--blue); }
.s-angenommen { background:var(--green-bg); color:var(--green); }
.s-abgelehnt  { background:var(--red-bg);   color:var(--red); }

/* ── Standard-Positions-Tabelle ── */
.std-table { width:100%; border-collapse:collapse; }
.std-table th { font-size:10px; color:var(--text3); font-weight:700; text-align:left; padding:0 6px 8px; border-bottom:.5px solid var(--border); }
.std-table th.r { text-align:right; }
.std-table td { padding:8px 6px; vertical-align:top; border-bottom:.5px solid var(--border); }
.std-table tr:last-child td { border-bottom:none; }
.std-table td.r { text-align:right; vertical-align:middle; }
.std-table td input,.std-table td select {
  padding:5px 7px; border:.5px solid var(--border2); border-radius:var(--r);
  font-size:13px; background:var(--surface); color:var(--text); outline:none;
  transition:border-color .12s; width:100%;
}
.std-table td input:focus,.std-table td select:focus { border-color:var(--accent); }
.pos-label  { font-size:13px; font-weight:600; display:block; }
.pos-total  { font-size:13px; font-weight:700; }
.mwst-sel   { width:70px !important; text-align:center; font-size:12px !important; }

/* ── Cocktail-Tags ── */
.ctag { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; background:var(--teal-bg); color:var(--teal); border-radius:20px; font-size:12px; font-weight:500; margin:2px; }
.ctag button { background:none; border:none; cursor:pointer; color:var(--teal); font-size:13px; line-height:1; }

/* ── Bars ── */
.bars-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
.bar-chip  { display:flex; align-items:center; gap:8px; padding:8px 12px; border:.5px solid var(--border2); border-radius:var(--r); cursor:pointer; transition:all .12s; user-select:none; }
.bar-chip:hover { border-color:var(--accent); background:var(--surface2); }
.bar-chip.sel   { border-color:var(--accent); background:var(--accent); color:var(--accent-fg); }
.bar-chip.sel .bc-price { color:rgba(255,255,255,.65); }
.bc-name  { font-size:13px; font-weight:600; flex:1; }
.bc-price { font-size:12px; color:var(--text2); }

/* ── Summary ── */
.sum-box { background:var(--surface2); border-radius:var(--r); padding:14px 16px; }
.sum-row { display:flex; justify-content:space-between; padding:3px 0; font-size:13px; color:var(--text2); }
.sum-row.bar-r { color:var(--blue); }
.sum-row.sum-divider { border-top:.5px solid var(--border2); padding-top:8px; margin-top:4px; color:var(--text); font-weight:600; }
.sum-row.total { font-size:16px; font-weight:700; color:var(--text); border-top:.5px solid var(--border2); padding-top:10px; margin-top:4px; }
.sum-detail { color:var(--text3); font-weight:400; }

/* ── Bedarf ── */
.bedarf-name { font-size:14px; }

/* ── Settings ── */
.set-item { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:.5px solid var(--border); }
.set-item:last-child { border-bottom:none; }
.set-item-row { display:flex; align-items:center; gap:8px; width:100%; }
.ing-tag { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; background:var(--teal-bg); color:var(--teal); border-radius:20px; font-size:11px; font-weight:500; margin:2px; }
.ing-tag button { background:none; border:none; cursor:pointer; color:var(--teal); font-size:13px; line-height:1; }
.ing-add-row { display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
.ing-add-row input,.ing-add-row select { padding:5px 8px; border:.5px solid var(--border2); border-radius:var(--r); font-size:12px; background:var(--surface); color:var(--text); outline:none; }
.ing-add-row input:focus,.ing-add-row select:focus { border-color:var(--accent); }
.ing-add-btn { padding:5px 10px; border:.5px solid var(--border2); border-radius:var(--r); background:var(--surface2); color:var(--text); cursor:pointer; font-size:12px; white-space:nowrap; }

/* ── Misc ── */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--text3); gap:12px; }
.empty i { font-size:40px; }
.toast { position:fixed; bottom:20px; right:20px; background:var(--accent); color:var(--accent-fg); padding:10px 18px; border-radius:var(--r); font-size:13px; font-weight:600; z-index:999; display:flex; align-items:center; gap:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); transform:translateY(60px); opacity:0; transition:all .25s; }
.toast.show { transform:translateY(0); opacity:1; }
.mo { position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:100; display:none; align-items:center; justify-content:center; }
#confirm-modal { z-index:200; }
.mo.open { display:flex; }
.mo-box { background:var(--surface); border-radius:var(--rl); padding:24px; max-width:420px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.15); }
.mo-box h3 { font-size:16px; font-weight:700; margin-bottom:8px; }
.mo-box p  { font-size:13px; color:var(--text2); margin-bottom:20px; }
.mo-actions { display:flex; gap:8px; justify-content:flex-end; }

/* ── Positions-Blöcke ── */
.pos-block { border:.5px solid var(--border); border-radius:var(--r); margin-bottom:8px; overflow:hidden; }
.pos-block-head { display:flex; align-items:center; gap:12px; padding:8px 14px; background:var(--surface2); }
.pos-block-body { padding:10px 14px; }
.pos-label { font-size:13px; font-weight:700; }
.pos-total { font-size:14px; font-weight:700; min-width:90px; text-align:right; }
.unit-label { font-size:12px; color:var(--text3); white-space:nowrap; }
.sek-toggle { background:none; border:none; padding:2px 5px; cursor:pointer; color:var(--text3); border-radius:4px; display:flex; align-items:center; flex-shrink:0; transition:color .12s; }
.sek-toggle:hover { color:var(--text); background:rgba(0,0,0,.06); }
.sek-toggle.sek-off { color:var(--red,#e05252); }
.pos-block.sek-disabled .pos-block-body { display:none; }
.pos-block.sek-disabled .pos-label { opacity:0.4; text-decoration:line-through; }

/* ── Inner table (Personal, Staffeln, Extras) ── */
.inner-table { width:100%; border-collapse:collapse; }
.inner-table th { font-size:10px; color:var(--text3); font-weight:700; text-align:left; padding:0 5px 6px; border-bottom:.5px solid var(--border); }
.inner-table th.r { text-align:right; }
.inner-table td { padding:5px 5px; vertical-align:middle; }
.inner-table td.r { text-align:right; }
.inner-table td.num input { text-align:right; }
.inner-table td input,.inner-table td select {
  padding:5px 7px; border:.5px solid var(--border2); border-radius:var(--r);
  font-size:13px; background:var(--surface); color:var(--text); outline:none; width:100%;
  transition:border-color .12s;
}
.inner-table td input:focus,.inner-table td select:focus { border-color:var(--accent); }
.pz-total,.e-total { font-size:13px; font-weight:600; white-space:nowrap; }

/* ── Ingredient tags ── */
.ing-tags-wrap { min-height:24px; margin-bottom:6px; }
.ing-placeholder { font-size:12px; color:var(--text3); }

/* ── Staffel rows ── */
.staffel-row td { border-bottom:.5px solid var(--border); }
.staffel-row:last-child td { border-bottom:none; }
.staffel-row-aktiv { background:rgba(15,110,86,.04); }
.staffel-row-aktiv td input { font-weight:600; }
.st-total-aktiv { color:var(--teal); font-weight:700; font-size:13px; }
.st-alt-price { color:var(--text3); font-size:12px; font-style:italic; }
.hint-text { font-size:11px; color:var(--text3); margin-top:5px; display:flex; align-items:center; gap:4px; }
.hint-text .ti { font-size:12px; }

/* ── Status-Badges in Sidebar ── */
.ni-status {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.03em;
  padding:1px 5px; border-radius:10px; margin-top:2px; line-height:1.6;
}
.ns-entwurf    { background:rgba(133,79,11,.15);  color:#854f0b; }
.ns-versendet  { background:rgba(24,95,165,.15);  color:#185fa5; }
.ns-angenommen { background:rgba(59,109,17,.18);  color:#3b6d11; }
.ns-abgelehnt  { background:rgba(163,45,45,.15);  color:#a32d2d; }
.nav-item.active .ni-main .ni-status { background:rgba(0,0,0,.06); }
.ni-status { margin-top:0; }

/* ── Autosave Indikator ── */
.autosave-indicator { font-size:11px; color:var(--teal); opacity:0; transition:opacity .4s; white-space:nowrap; }

/* ── Ablauf-Banner ── */
.ablauf-banner { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--red-bg); color:var(--red); font-size:12px; font-weight:600; border-bottom:.5px solid rgba(163,45,45,.2); }
.ablauf-banner i { font-size:15px; }

/* ── Eingefroren ── */
.freeze-banner { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--amber-bg,rgba(133,79,11,.1)); color:var(--amber,#854f0b); font-size:12px; font-weight:600; border-bottom:.5px solid var(--border); }
.freeze-banner i { font-size:15px; flex-shrink:0; }
.frozen-content { pointer-events:none; opacity:0.55; user-select:none; }

/* ── Paket-Info Box (Bedarfe Tab) ── */
.paket-info-box {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--teal-bg); border:.5px solid rgba(15,110,86,.2);
  border-radius:var(--rl); padding:14px 16px; margin-bottom:14px;
}

/* ── Cocktail-Settings: kompakte Karten ── */
.cocktail-set-item {
  border:.5px solid var(--border2); border-radius:var(--r);
  margin-bottom:8px; overflow:hidden;
}
.cocktail-set-head {
  display:flex; align-items:center; gap:7px;
  padding:8px 10px; background:var(--surface2);
}
.cocktail-toggle-btn {
  display:flex; align-items:center; gap:4px;
  padding:3px 8px; border:.5px solid var(--border); border-radius:var(--r);
  background:var(--surface); cursor:pointer; font-size:11px; color:var(--text2);
  white-space:nowrap; transition:background .12s;
}
.cocktail-toggle-btn:hover { background:var(--surface2); }
.cocktail-zutaten-body { padding:8px 10px; background:var(--surface); }
.cz-add-row {
  display:flex; gap:5px; align-items:center; flex-wrap:wrap;
  margin-top:6px; padding-top:6px; border-top:.5px solid var(--border);
}

/* ── Bar-Karten ── */
.bars-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.bar-card {
  display:flex; border:.5px solid var(--border2); border-radius:var(--r); overflow:hidden;
}
.bar-card-color-strip { width:6px; flex-shrink:0; }
.bar-card-body { flex:1; padding:10px 12px; }
.bar-card-row { display:flex; align-items:center; gap:6px; }

/* ── Export/Import Sidebar Buttons ── */
.sb-btn .ti-database-export, .sb-btn .ti-database-import { font-size:15px; }

/* ── Auftrag Nav Sub-Items ── */
.nav-offer-group { margin-bottom:2px; }

/* Wrapper für Sub-Items mit Verbindungslinie */
.nav-sub-list { position:relative; }
.nav-sub-list::before {
  content:''; position:absolute;
  left:21px; top:0; bottom:24px;
  width:1.5px; background:var(--border2); border-radius:1px;
}

.nav-sub-item {
  display:flex; align-items:center; gap:7px;
  position:relative;
  padding:5px 38px 5px 48px;
  border-radius:var(--r); cursor:pointer;
  transition:background .12s; margin-bottom:1px;
  font-size:12px;
}
/* horizontaler Verbindungsarm vom Icon zur Rechnung */
.nav-sub-item::before {
  content:''; position:absolute;
  left:21px; top:50%;
  width:20px; height:1.5px;
  background:var(--border2);
}
.nav-sub-item:hover { background:var(--surface2); }
.nav-sub-item.active { background:rgba(15,110,86,.12); color:var(--teal); }
.nav-sub-item.active .ni-status { background:rgba(15,110,86,.15); color:var(--teal); }
.nav-add-auftrag {
  display:flex; align-items:center; gap:5px;
  padding:4px 10px 4px 48px;
  font-size:11px; color:var(--text3);
  cursor:pointer; border-radius:var(--r);
  transition:background .12s;
}
.nav-add-auftrag:hover { background:var(--teal-bg); color:var(--teal); }

/* ── Finanzen ─────────────────────────────────────────────── */
.fin-kpi-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.fin-kpi {
  flex:1; min-width:130px; padding:12px 16px;
  background:var(--surface); border:.5px solid var(--border2); border-radius:var(--r);
  display:flex; flex-direction:column; gap:4px;
}
.fin-kpi-result { flex:1.5; background:var(--surface2); border-color:var(--border2); }
.fin-kpi-lbl { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.fin-kpi-val { font-size:18px; font-weight:700; color:var(--text); }

/* ── Dashboard ────────────────────────────────────────────── */
.dash-kpi-danger { border-color:var(--red) !important; background:rgba(163,45,45,.06) !important; }
.dash-kpi-sub { font-size:10px; color:var(--text3); margin-top:2px; }
.dash-link { color:var(--blue); cursor:pointer; }
.dash-link:hover { text-decoration:underline; }
.dash-shared-table { table-layout:fixed; }

.fin-bilanz-table .fin-month-row { cursor:pointer; transition:background .12s; }
.fin-bilanz-table .fin-month-row:hover { background:var(--surface2); }
.fin-bilanz-table .fin-month-row.fin-open { background:var(--surface2); }
.fin-chev { font-size:12px; margin-right:6px; transition:transform .18s; display:inline-block; vertical-align:middle; }
.fin-month-row.fin-open .fin-chev { transform:rotate(90deg); }
.fin-det-row { cursor:pointer; }
.fin-det-row:hover { background:rgba(15,110,86,.05); }
.fin-det-row td { padding:5px 8px; border-bottom:.5px solid var(--border); font-size:12px; }
.fin-total-row td { padding:8px 6px; border-top:1.5px solid var(--border2); font-size:14px; }
.nav-group-toggle {
  background:none; border:none; padding:2px 3px; cursor:pointer;
  color:var(--text3); border-radius:4px; flex-shrink:0;
  display:flex; align-items:center; font-size:12px; margin-left:auto;
  transition:background .12s, color .12s;
}
.nav-group-toggle:hover { background:var(--border); color:var(--text); }
.nav-item.active .nav-group-toggle { color:var(--text2); }
.nav-item.active .nav-group-toggle:hover { background:var(--border); color:var(--text); }
.ni-ind-col { display:flex; flex-direction:column; gap:2px; align-items:center; flex-shrink:0; min-width:14px; }
.ni-ind { font-size:12px; line-height:1; }
.ni-ind.ang { color:var(--teal); }
.ni-ind.bez { color:#c9950a; }
/* icons behalten ihre Farbe auch wenn Angebot aktiv */

/* ── Dashboard Kalender ──────────────────────────────────── */
.dash-cal-nav   { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-cal-title { font-weight:600; font-size:14px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border2); border:1px solid var(--border2); border-radius:var(--r); overflow:hidden; }
.cal-hdr  { background:var(--surface2); padding:5px 4px; text-align:center; font-size:11px; font-weight:600; color:var(--text2); }
.cal-cell { background:var(--surface); min-height:76px; padding:4px 4px 3px; }
.cal-cell.cal-empty { background:var(--bg); min-height:76px; }
.cal-cell.cal-today { background:var(--blue-bg); }
.cal-day-num { font-size:11px; color:var(--text3); display:block; margin-bottom:3px; line-height:1; }
.cal-today .cal-day-num { color:var(--blue); font-weight:700; }
.cal-ev { font-size:10px; padding:2px 5px; border-radius:3px; color:#fff; margin-bottom:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4; }
.cal-ev:hover { opacity:.82; }
.cal-ev-green      { background:#3b6d11; }
.cal-ev-lightgreen { background:#6baa2e; }
.cal-ev-grey       { background:#9a9993; }
.cal-ev-versendet  { background:var(--blue); }
.cal-legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; padding-top:8px; border-top:.5px solid var(--border); }
.cal-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); }
.cal-legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── Schichtplan ─────────────────────────────────────────── */
.schicht-table { border-collapse:collapse; width:100%; table-layout:fixed; }
.schicht-table th { text-align:center; padding:10px 6px; background:var(--surface2); font-size:13px; border:.5px solid var(--border); }
.schicht-table td { padding:14px 10px; vertical-align:top; border:.5px solid var(--border); height:160px; }
.schicht-label-th { width:80px; }
.schicht-label { text-align:center; font-size:11px; font-weight:700; color:var(--text2); background:var(--surface2); width:80px; white-space:normal; line-height:1.5; }
.schicht-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; min-height:4px; margin-top:6px; }
.schicht-chip { background:var(--surface2); border:.5px solid var(--border2); border-radius:20px; padding:4px 10px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:3px; white-space:nowrap; transition:background .12s,color .12s,border-color .12s; }
.schicht-chip:hover { background:var(--red-bg); color:var(--red); border-color:var(--red); }
.schicht-add-sel { font-size:12px; padding:3px 6px; border:.5px dashed var(--border2); border-radius:4px; background:transparent; color:var(--text2); cursor:pointer; width:100%; margin-top:4px; }
.schicht-add-sel:hover { border-color:var(--accent); color:var(--text); }
/* Role blocks (Barkeeper = blau, Koch = grün) */
.schicht-role-block { border-radius:6px; padding:5px 8px; margin-bottom:4px; }
.schicht-role-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.schicht-role-sel { font-size:12px; padding:3px 6px; border-radius:4px; background:var(--surface); color:var(--text); width:100%; }
.schicht-role-blue { background:rgba(24,95,165,.06); border:.5px solid rgba(24,95,165,.2); }
.schicht-role-blue .schicht-role-label { color:var(--blue); }
.schicht-role-sel-blue { border:.5px solid rgba(24,95,165,.3); }
.schicht-role-green { background:rgba(15,110,86,.06); border:.5px solid rgba(15,110,86,.22); }
.schicht-role-green .schicht-role-label { color:#0f6e56; }
.schicht-role-sel-green { border:.5px solid rgba(15,110,86,.3); }
.schicht-role-orange { background:rgba(234,88,12,.06); border:.5px solid rgba(234,88,12,.22); }
.schicht-role-orange .schicht-role-label { color:#ea580c; }
.schicht-role-sel-orange { border:.5px solid rgba(234,88,12,.3); }
.schicht-empty { font-size:11px; color:var(--text3); }
/* Chips innerhalb Role-Blocks: volle Breite, eine pro Zeile */
.schicht-role-content .schicht-chips { flex-direction:column; gap:3px; margin-top:2px; }
.schicht-role-content .schicht-chip { width:100%; justify-content:space-between; border-radius:5px; margin:0; }
/* Ruhetag-Zellen */
.schicht-ruhetag-cell { background:repeating-linear-gradient(135deg,var(--surface2) 0px,var(--surface2) 6px,var(--surface) 6px,var(--surface) 12px) !important; opacity:.6; }
.schicht-ruhetag-text { display:flex; align-items:center; justify-content:center; height:100%; min-height:60px; color:var(--text3); font-size:11px; font-style:italic; flex-direction:column; gap:4px; }
/* Kopfzeile: 3-Spalten-Grid – Urlaub links | Datum Mitte | Ruhetag rechts */
.schicht-th-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; width:100%; }
.schicht-th-urlaub { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.schicht-th-date { text-align:center; font-size:13px; font-weight:700; }
.schicht-th-today { color:var(--accent); }
.schicht-urlaub-chip { display:inline-block; font-size:9px; padding:1px 5px; border-radius:10px; white-space:nowrap; line-height:1.6; }
.schicht-ruhe-toggle { font-size:9px; padding:1px 5px; border:.5px solid var(--border2); border-radius:10px; background:transparent; cursor:pointer; color:var(--text3); white-space:nowrap; }
.schicht-ruhe-toggle.active { background:var(--red-bg); color:var(--red); border-color:var(--red); }
/* Rolle-Block: horizontales Layout – Label links vertikal, Inhalt rechts */
.schicht-role-block { border-radius:6px; padding:5px 6px; margin-bottom:4px; display:flex; gap:6px; align-items:stretch; }
.schicht-role-label-vert { writing-mode:vertical-rl; transform:rotate(180deg); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:.75; }
.schicht-role-content { flex:1; min-width:0; }
/* × Ausblenden-Button im Spalten-Header (sichtbar bei hover) */
.schicht-hide-tag { position:absolute; top:3px; right:4px; width:16px; height:16px; font-size:12px; line-height:16px; border:none; background:transparent; color:var(--text3); cursor:pointer; border-radius:3px; padding:0; text-align:center; opacity:0; transition:opacity .15s; }
.schicht-table th:hover .schicht-hide-tag { opacity:1; }
/* Notizfeld in Schichtzellen */
.schicht-notiz-input { width:100%; box-sizing:border-box; margin-top:6px; padding:5px 7px; min-height:34px; font-size:11px; font-family:inherit; color:var(--text2); background:transparent; border:.5px dashed var(--border2); border-radius:4px; resize:vertical; line-height:1.4; }
.schicht-notiz-input::placeholder { color:var(--text3); font-style:italic; }
.schicht-notiz-input:focus { outline:none; border-color:var(--accent); border-style:solid; }
/* Archiv */
.schicht-archiv-item { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:.5px solid var(--border); cursor:pointer; font-size:13px; }
.schicht-archiv-item:last-child { border-bottom:none; }
.schicht-archiv-item:hover { background:var(--surface2); }
.schicht-archiv-item.current { font-weight:700; color:var(--accent); }

/* ── Schicht-Notiz sub-row ── */
.schicht-notiz-row td { padding:4px 10px 8px !important; height:auto !important; vertical-align:top; }

/* ── Schicht-Chip Urlaubswarnung ── */
.schicht-chip-urlaub { opacity:.7; background:rgba(234,88,12,.15) !important; border-color:rgba(234,88,12,.4) !important; }
.schicht-role-urlaub-warn { border-color:rgba(234,88,12,.4) !important; background:rgba(255,240,220,.5) !important; }

/* ── Schicht-Divider ── */
.schicht-divider td { padding:0 !important; height:auto !important; border:none !important; }

/* ── Urlaubskalender ── */
.schicht-kal-table { border-collapse:collapse; font-size:12px; }
.schicht-kal-table th { text-align:center; font-size:10px; font-weight:700; color:var(--text3); padding:2px 0 5px; width:36px; }
.schicht-kal-cell, .schicht-kal-empty { width:36px; height:36px; text-align:center; vertical-align:top; padding:3px 2px; border-radius:6px; }
.schicht-kal-cell { cursor:default; }
.schicht-kal-cell:hover { background:var(--surface2); }
.schicht-kal-we { background:rgba(0,0,0,.03); }
.schicht-kal-today .schicht-kal-day { background:var(--accent); color:var(--accent-fg); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 1px; font-weight:700; }
.schicht-kal-day { font-size:11px; font-weight:600; color:var(--text2); line-height:1; margin-bottom:2px; }
.schicht-kal-dots { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; }
.schicht-kal-dot { display:inline-block; width:7px; height:7px; border-radius:50%; }

/* ═══════════════════════════════════════════════════════════
   KALENDER-ANSICHT
   ═══════════════════════════════════════════════════════════ */
.kal-grid-header { display:grid; grid-template-columns:repeat(7,1fr); gap:0; margin-bottom:2px; }
.kal-header-cell { text-align:center; font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; padding:6px 0; }
.kal-header-cell.kal-weekend { color:var(--accent); }
.kal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:.5px solid var(--border); border-radius:var(--r); overflow:hidden; }
.kal-cell { background:var(--surface); min-height:90px; padding:6px 5px; position:relative; }
.kal-cell-empty { background:var(--surface2); min-height:90px; }
.kal-cell.kal-weekend { background:rgba(0,0,0,.02); }
.kal-cell.kal-today { background:rgba(var(--accent-rgb,99,102,241),.04); }
.kal-day-num { font-size:12px; font-weight:600; color:var(--text3); margin-bottom:4px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.kal-today-num { background:var(--accent); color:var(--accent-fg) !important; font-weight:700; }
.kal-event { display:flex; align-items:center; gap:3px; font-size:10px; padding:2px 4px; margin-bottom:2px; border-radius:3px; cursor:pointer; background:var(--surface2); overflow:hidden; white-space:nowrap; transition:opacity .15s; }
.kal-event:hover { opacity:.75; }
.kal-event span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kal-list-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:.5px solid var(--border); cursor:pointer; border-radius:var(--r); transition:background .12s; }
.kal-list-item:hover { background:var(--surface2); }
.kal-list-date { font-size:12px; font-weight:600; color:var(--text2); min-width:80px; }
.kal-list-label { flex:1; display:flex; flex-direction:column; gap:2px; }
.kal-list-label strong { font-size:13px; }
.kal-list-label span { font-size:11px; }
.kal-list-status { font-size:11px; font-weight:700; white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════
   PIPELINE / KANBAN
   ═══════════════════════════════════════════════════════════ */
.pipe-board { display:flex; gap:14px; align-items:flex-start; min-width:860px; }
.pipe-col { flex:1; min-width:210px; background:var(--surface2); border-radius:var(--rl); overflow:hidden; }
.pipe-col-header { padding:12px 14px; background:var(--surface); border-bottom:.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:8px; overflow:hidden; }
.pipe-col-title { font-size:13px; font-weight:700; white-space:nowrap; }
.pipe-col-count { background:var(--surface2); color:var(--text3); font-size:11px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:4px; }
.pipe-col-total { font-size:11px; color:var(--text2); font-weight:600; white-space:nowrap; flex-shrink:0; }
.pipe-col-body { padding:8px; display:flex; flex-direction:column; gap:7px; min-height:200px; }
.pipe-card { background:var(--surface); border:.5px solid var(--border2); border-radius:var(--r); padding:10px 12px; cursor:pointer; transition:box-shadow .15s, transform .1s; }
.pipe-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.1); transform:translateY(-1px); }
.pipe-card-expired { border-color:var(--red) !important; }
.pipe-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.pipe-card-nr { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.04em; }
.pipe-card-sum { font-size:12px; font-weight:800; color:var(--text); }
.pipe-card-firma { font-size:13px; font-weight:600; color:var(--text); }
.pipe-card-ap { font-size:11px; color:var(--text3); margin-top:1px; }
.pipe-card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:11px; color:var(--text3); }
.pipe-empty { text-align:center; padding:20px 10px; font-size:12px; color:var(--text3); }

/* ═══════════════════════════════════════════════════════════
   KUNDENSTAMM
   ═══════════════════════════════════════════════════════════ */
.kunden-card { background:var(--surface); border:.5px solid var(--border2); border-radius:var(--r); padding:14px 16px; margin-bottom:8px; display:flex; align-items:flex-start; gap:12px; }
.kunden-card-edit { background:var(--surface2); border-color:var(--accent); }
.kunden-card-main { flex:1; min-width:0; }
.kunden-card-name { font-size:15px; font-weight:700; margin-bottom:5px; }
.kunden-card-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--text2); }
.kunden-card-meta span { display:flex; align-items:center; gap:4px; }
.kunden-card-meta i { font-size:11px; color:var(--text3); }
.kunden-card-actions { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.kunden-card-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.kunden-field-row { display:flex; flex-direction:column; gap:3px; }
.kunden-field-row label { font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; }
.kunden-inp { padding:6px 8px; border:.5px solid var(--border2); border-radius:var(--r); font-size:13px; background:var(--surface); color:var(--text); outline:none; width:100%; }
.kunden-inp:focus { border-color:var(--accent); }

/* Autocomplete Dropdown */
.kunden-ac-dropdown { position:absolute; top:100%; left:0; right:0; z-index:200; background:var(--surface); border:.5px solid var(--border2); border-radius:var(--r); box-shadow:0 4px 16px rgba(0,0,0,.12); max-height:220px; overflow-y:auto; }
.kunden-ac-item { padding:8px 12px; cursor:pointer; font-size:13px; border-bottom:.5px solid var(--border); transition:background .1s; }
.kunden-ac-item:last-child { border-bottom:none; }
.kunden-ac-item:hover { background:var(--surface2); }

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:#111113; --surface:#1e1e21; --surface2:#28282c;
  --border:rgba(255,255,255,.10); --border2:rgba(255,255,255,.22);
  --text:#f2f1ec; --text2:#c8c7c1; --text3:#888885;
  --accent:#f2f1ec; --accent-fg:#111113;
  --blue:#5b9fd4;  --blue-bg:rgba(91,159,212,.18);
  --green:#7fc44a; --green-bg:rgba(127,196,74,.16);
  --red:#e06060;   --red-bg:rgba(224,96,96,.18);
  --amber:#d4913a; --amber-bg:rgba(212,145,58,.18);
  --teal:#3db88a;  --teal-bg:rgba(61,184,138,.16);
}
[data-theme="dark"] .btn-primary:hover    { background:#ccc; }
[data-theme="dark"] .pipe-card:hover      { box-shadow:0 2px 8px rgba(0,0,0,.5); }
[data-theme="dark"] .ns-entwurf    { background:rgba(212,145,58,.22);  color:#d4913a; }
[data-theme="dark"] .ns-versendet  { background:rgba(91,159,212,.22);  color:#5b9fd4; }
[data-theme="dark"] .ns-angenommen { background:rgba(127,196,74,.22);  color:#7fc44a; }
[data-theme="dark"] .ns-abgelehnt  { background:rgba(224,96,96,.22);   color:#e06060; }
[data-theme="dark"] .s-entwurf    { background:rgba(212,145,58,.22);   color:#d4913a; }
[data-theme="dark"] .s-versendet  { background:rgba(91,159,212,.22);   color:#5b9fd4; }
[data-theme="dark"] .s-angenommen { background:rgba(127,196,74,.22);   color:#7fc44a; }
[data-theme="dark"] .s-abgelehnt  { background:rgba(224,96,96,.22);    color:#e06060; }
[data-theme="dark"] .fin-kpi      { border:.5px solid var(--border2); }
[data-theme="dark"] .fin-kpi-result .fin-kpi-val { color:#7fc44a; }

/* ── Theme Toggle ── */
.theme-toggle {
  display:flex; align-items:center; gap:10px; padding:10px 0;
}
.theme-toggle-track {
  width:42px; height:24px; border-radius:12px; background:var(--surface2);
  border:.5px solid var(--border2); position:relative; cursor:pointer;
  transition:background .2s;
}
[data-theme="dark"] .theme-toggle-track { background:var(--accent); }
.theme-toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--text3); transition:left .2s, background .2s;
}
[data-theme="dark"] .theme-toggle-thumb { left:21px; background:var(--accent-fg); }

/* ═══════════════════════════════════════════════════════════
   OFFLINE BANNER
   ═══════════════════════════════════════════════════════════ */
.offline-banner {
  display:none; align-items:center; justify-content:center; gap:10px;
  padding:7px 20px; background:#a32d2d; color:#fff;
  font-size:12px; font-weight:600;
  position:fixed; top:0; left:0; right:0; z-index:9999;
}
.offline-banner.show { display:flex; }

/* ═══════════════════════════════════════════════════════════
   GLOBALE SUCHE
   ═══════════════════════════════════════════════════════════ */
.gsearch-overlay {
  display:none; position:fixed; inset:0; z-index:8888;
  background:rgba(0,0,0,.45); align-items:flex-start;
  justify-content:center; padding-top:80px;
}
.gsearch-overlay.show { display:flex; }
.gsearch-box {
  background:var(--surface); border:.5px solid var(--border2);
  border-radius:var(--rl); width:580px; max-width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden;
}
.gsearch-input-wrap {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:.5px solid var(--border);
}
.gsearch-input-wrap i { font-size:18px; color:var(--text3); flex-shrink:0; }
.gsearch-input {
  flex:1; border:none; background:transparent;
  font-size:15px; color:var(--text); outline:none;
}
.gsearch-results { max-height:380px; overflow-y:auto; }
.gsearch-group-title {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.06em; padding:10px 16px 4px;
}
.gsearch-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; cursor:pointer; transition:background .1s;
}
.gsearch-item:hover { background:var(--surface2); }
.gsearch-item-icon { font-size:16px; color:var(--text3); flex-shrink:0; }
.gsearch-item-main { flex:1; min-width:0; }
.gsearch-item-title { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gsearch-item-sub   { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gsearch-empty { padding:32px 16px; text-align:center; color:var(--text3); font-size:13px; }
.gsearch-hint  { padding:8px 16px; font-size:11px; color:var(--text3); border-top:.5px solid var(--border); text-align:right; }

/* ═══════════════════════════════════════════════════════════
   E-MAIL-VORLAGE MODAL
   ═══════════════════════════════════════════════════════════ */
.email-tpl-field {
  width:100%; padding:8px 10px; border:.5px solid var(--border2);
  border-radius:var(--r); font-size:13px; background:var(--surface);
  color:var(--text); outline:none; font-family:inherit;
  transition:border-color .12s;
}
.email-tpl-field:focus { border-color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   KUNDEN HISTORY
   ═══════════════════════════════════════════════════════════ */
.kunden-history { margin-top:10px; padding-top:10px; border-top:.5px solid var(--border); }
.kunden-history-title {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;
}
.kunden-history-item {
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-bottom:.5px solid var(--border); cursor:pointer; font-size:12px;
}
.kunden-history-item:hover .kunden-history-nr { color:var(--accent); text-decoration:underline; }
.kunden-history-item:last-child { border-bottom:none; }
.kunden-history-nr  { font-weight:700; flex-shrink:0; }
.kunden-history-dat { color:var(--text3); flex-shrink:0; }
.kunden-history-sum { margin-left:auto; font-weight:600; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   JAHRES-TIMELINE & QUARTAL-STATS
   ═══════════════════════════════════════════════════════════ */
.year-timeline { display:flex; gap:3px; align-items:stretch; }
.yt-month { flex:1; min-width:0; }
.yt-month-label {
  font-size:9px; font-weight:700; color:var(--text3); text-align:center;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px;
}
.yt-month-bar {
  background:var(--surface2); border-radius:6px; padding:3px;
  min-height:36px; display:flex; flex-direction:column; gap:2px;
}
.yt-event {
  font-size:9px; padding:2px 3px; border-radius:3px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; font-weight:600;
}
.yt-event:hover { opacity:.75; }
.yt-angebot   { background:var(--green-bg);  color:var(--green); }
.yt-versendet { background:var(--blue-bg);  color:var(--blue); }
.yt-auftrag   { background:var(--teal-bg);  color:var(--teal); }
.dash-q-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.dash-q-cell { background:var(--surface2); border-radius:var(--r); padding:10px 12px; text-align:center; }
.dash-q-label { font-size:10px; color:var(--text3); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.dash-q-val   { font-size:14px; font-weight:800; color:var(--text); }
.dash-q-sub   { font-size:10px; color:var(--text3); margin-top:2px; }