:root{
  --bg:#141a26; --bg2:#202d42; --panel:#202d42; --panel2:#3b4556;
  --accent:#f2cc83; --accent2:#f7d89a; --text:#f9fafb; --muted:#9ca3af;
  --border:rgba(148,163,184,.5); --danger:#e34242; --ok:#22c55e;
  --shadow:0 18px 45px rgba(0,0,0,.22); --t:150ms ease-out;

  --btn-bg:var(--accent); --btn-text:#111827;
  --btn-shadow:0 12px 26px rgba(0,0,0,.28);
  --btn-hover-bg:var(--accent2); --btn-hover-shadow:0 16px 34px rgba(0,0,0,.34);
  --btn-active-shadow:0 10px 22px rgba(0,0,0,.28);

  --cost-planned:#6b7280;
  --cost-approved:#3b82f6;
  --cost-invoiced:#f59e0b;
  --cost-paid:#22c55e;

  --dev-over:#ef4444;
  --dev-under:#22c55e;
  --dev-ok:#6b7280;

  --cat-personal:#8b5cf6;
  --cat-material:#f59e0b;
  --cat-fremdleistung:#3b82f6;
  --cat-reise:#ec4899;
  --cat-lizenz:#06b6d4;
  --cat-infrastruktur:#f97316;
  --cat-sonstig:#6b7280;

  --cost-cols:
    40px
    220px
    150px
    170px
    150px
    130px
    105px
    105px
    105px
    105px
    105px
    138px
    128px
    112px
    118px;
}

body.theme-light{
  --bg:#f7ecd4; --bg2:#faefdc; --panel:#fff7e7; --panel2:#f2cc83;
  --accent:#296117; --accent2:#3b7f22; --text:#111827; --muted:#4b5563;
  --border:rgba(148,119,81,.6); --danger:#b91c1c; --ok:#296117;

  --btn-bg:var(--accent); --btn-text:#ffffff;
  --btn-shadow:0 12px 26px rgba(0,0,0,.18);
  --btn-hover-bg:var(--accent2); --btn-hover-shadow:0 16px 34px rgba(0,0,0,.22);
  --btn-active-shadow:0 10px 22px rgba(0,0,0,.18);

  --cost-planned:#9ca3af;
  --cost-approved:#2563eb;
  --cost-invoiced:#d97706;
  --cost-paid:#16a34a;

  --dev-over:#dc2626;
  --dev-under:#16a34a;
  --dev-ok:#9ca3af;

  --cat-personal:#7c3aed;
  --cat-material:#d97706;
  --cat-fremdleistung:#2563eb;
  --cat-reise:#db2777;
  --cat-lizenz:#0891b2;
  --cat-infrastruktur:#ea580c;
  --cat-sonstig:#9ca3af;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html{
  -webkit-text-size-adjust:100%;
}
body{
  padding:18px;
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
  padding-top:max(18px, env(safe-area-inset-top));
  padding-bottom:max(18px, env(safe-area-inset-bottom));
}

.wrap{ width:100%; display:flex; justify-content:center; }
.shell{
  max-width:2100px;
  width:100%;
  background:var(--bg2);
  border-radius:1.8rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:16px;
  min-width:0;
}

.topbar{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; max-width:100%; min-width:0; }
.brand img{ width:26px; height:26px; border-radius:8px; border:1px solid var(--border); object-fit:cover; }
.bt{ display:inline-flex; flex-direction:column; line-height:1.1; min-width:0; }
.bt strong{ font-weight:900; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt span{ color:var(--muted); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actions{ display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }

.calcHeader{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.title{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 520px; }
h1{ margin:0; font-size:1.6rem; font-weight:900; letter-spacing:.02em; }
h1 .em{ color:var(--accent); }
.subtitle{ margin:0; color:var(--muted); font-size:.9rem; max-width:1200px; line-height:1.35; }
.right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-size:.85rem; min-width:0; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; border:1px solid var(--border); background:var(--panel2); color:var(--muted);
  max-width:100%;
}
.pill strong{ color:var(--text); }

.layout{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.panel{
  background:var(--panel);
  border-radius:1.4rem;
  border:1px solid var(--border);
  padding:14px 16px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  min-width:0;
}
.panel.half{ grid-column:span 1; }
.panel.full{ grid-column:1 / -1; }
.panelHead{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
.panelHead h2{ margin:0; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; }
.panelHead .headActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.projectOverviewHead{
  gap:14px;
  flex-wrap:wrap;
}

.projectOverviewHeadLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.projectSelHead{
  width:auto;
  min-width:220px;
  max-width:340px;
}

#projectOverviewContent{
  display:block;
}

.status{ font-size:.8rem; color:var(--muted); min-height:1.2em; overflow-wrap:anywhere; }
.status.bad{ color:var(--danger); }

.btn{
  border:none; cursor:pointer;
  padding:10px 14px; border-radius:1rem;
  background:var(--btn-bg); color:var(--btn-text);
  font-weight:900; letter-spacing:.02em;
  box-shadow:var(--btn-shadow);
  transition:transform var(--t), box-shadow var(--t), filter var(--t), background var(--t);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px;
  max-width:100%;
}
.btn:hover{ transform:translateY(-1px); background:var(--btn-hover-bg); box-shadow:var(--btn-hover-shadow); filter:saturate(1.05); }
.btn:active{ transform:translateY(0); box-shadow:var(--btn-active-shadow); }
.btn.ghost{ background:transparent; border:1px solid var(--border); box-shadow:none; color:var(--text); }
.btn.ghost:hover{ background:var(--panel2); box-shadow:0 10px 22px rgba(0,0,0,.18); }
.btn.danger{ background:var(--danger); color:#fff; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn.small{ padding:7px 10px; border-radius:.9rem; font-size:.82rem; font-weight:850; min-height:36px; }
.btn.mini{ padding:5px 8px; border-radius:.7rem; font-size:.75rem; font-weight:800; min-height:30px; }
.btn.mini.active{ background:var(--accent); color:var(--btn-text); }

input[type=text], input[type=date], input[type=number], select{
  width:100%;
  min-width:0;
  padding:8px 10px;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:.85rem;
  outline:none;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
  appearance:none;
}
input:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent2), 0 0 0 5px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
input[type=date]{ color-scheme:dark; }
body.theme-light input[type=date]{ color-scheme:light; }

input[type=number]{ font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[readonly]{ opacity:.9; cursor:default; }

.note{ color:var(--muted); font-size:.78rem; line-height:1.35; margin-top:6px; }

.labT{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  white-space:nowrap;
}
.overviewRow1{
  display:grid;
  grid-template-columns:minmax(260px, 360px) 1fr;
  gap:14px;
  align-items:start;
}
.boxCell{
  border:1px solid var(--border);
  border-radius:1rem;
  background:rgba(0,0,0,.06);
  padding:10px 10px;
  min-width:0;
}
body.theme-light .boxCell{ background:rgba(0,0,0,.03); }
.boxCell .val{
  margin-top:6px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-size:1.02rem;
}
.kpiGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(160px, 1fr));
  gap:10px;
  align-items:start;
}
.metaRow2{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.metaBox{
  border:1px solid var(--border);
  border-radius:1rem;
  background:rgba(0,0,0,.06);
  overflow:hidden;
  min-width:0;
}
body.theme-light .metaBox{ background:rgba(0,0,0,.03); }
.metaBoxHead{
  background:rgba(0,0,0,.06);
  border-bottom:1px solid var(--border);
  padding:8px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
body.theme-light .metaBoxHead{ background:rgba(0,0,0,.03); }
.metaBoxHead .ttl{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:950;
  white-space:nowrap;
}
.metaBoxBody{
  padding:10px 10px;
  display:grid;
  grid-template-columns:140px 1fr;
  row-gap:10px;
  column-gap:10px;
  align-items:center;
}
.metaLbl{ color:var(--muted); font-size:.78rem; }
.metaVal{
  font-weight:950;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--border);
  border-radius:.85rem;
  padding:8px 10px;
  background:var(--panel2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.workTop{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.workTop .left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0; }
.workTitle{ font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; font-weight:950; white-space:nowrap; }
.workTop .btns{ display:flex; gap:8px; flex-wrap:wrap; }
.workTop .rightControls{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.viewToggles{ display:flex; align-items:center; gap:6px; }
.zoomLabel{ font-size:.78rem; color:var(--muted); margin-right:4px; }

.filterBar{
  background:rgba(0,0,0,.06);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:12px 14px;
  margin-bottom:12px;
}
body.theme-light .filterBar{ background:rgba(0,0,0,.03); }
.filterGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px 14px;
  align-items:end;
}
.filterItem{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.filterItem label{
  font-size:.75rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.filterActions{ display:flex; align-items:flex-end; }

.phaseMultiFilterItem{ position:relative; }

.multiSelect{ position:relative; width:100%; }

.multiSelectBtn{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  border-radius:.75rem;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:.85rem;
  text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.multiSelectBtn:hover{ filter:saturate(1.03); }
.multiSelectBtn:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent2), 0 0 0 5px rgba(0,0,0,.25);
  transform:translateY(-1px);
}

.multiSelectCaret{
  opacity:.85;
  font-size:.82rem;
  flex:0 0 auto;
  transition:transform var(--t);
}
.multiSelect[data-open="true"] .multiSelectCaret{ transform:rotate(180deg); }

.multiSelectPanel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:80;
  border:1px solid var(--border);
  border-radius:.9rem;
  background:var(--panel);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  padding:6px;
  max-height:260px;
  overflow:auto;
}

.msOption{
  display:grid;
  grid-template-columns:18px minmax(0, 1fr);
  align-items:center;
  column-gap:8px;
  padding:7px 8px;
  border-radius:.65rem;
  cursor:pointer;
  user-select:none;
  font-size:.83rem;
  color:var(--text);
  line-height:1.2;
}
.msOption span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msOption:hover{ background:rgba(255,255,255,.05); }
body.theme-light .msOption:hover{ background:rgba(0,0,0,.04); }

.msOption input[type="checkbox"]{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--accent);
  cursor:pointer;
  align-self:center;
  justify-self:center;
}

.msOptionAll{
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
  padding-bottom:8px;
}

.costFrame{
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:auto;
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.costHeader{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.costHeadGrid, .costFootGrid{
  display:grid;
  grid-template-columns:var(--cost-cols);
  gap:0;
  min-width:1920px;
}
.costHeadCell{
  padding:10px 8px;
  border-right:1px solid var(--border);
  display:flex; align-items:center;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  background:rgba(242, 204, 131, .14);
}
body.theme-light .costHeadCell{ background:rgba(41, 97, 23, .12); }
.costHeadCell.num{ justify-content:flex-end; }
.costHeadCell:last-child{ border-right:none; }

.costBody{
  max-height:560px;
  overflow-y:auto;
  min-width:1920px;
  -webkit-overflow-scrolling:touch;
}

.costPhaseRow{
  display:grid;
  grid-template-columns:var(--cost-cols);
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.12);
  font-weight:900;
  cursor:pointer;
  transition:background .15s ease;
  min-height:38px;
}
.costPhaseRow:hover{ background:rgba(0,0,0,.18); }
body.theme-light .costPhaseRow{ background:rgba(0,0,0,.06); }
body.theme-light .costPhaseRow:hover{ background:rgba(0,0,0,.10); }
.costPhaseRow.collapsed .phaseToggle::before{ content:"▶"; }
.costPhaseRow .phaseToggle::before{ content:"▼"; margin-right:6px; font-size:.9rem; }

.cpCell, .cCell{
  border-right:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:6px;
  font-size:.82rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cpCell:last-child, .cCell:last-child{ border-right:none; }
.cpCell.num, .cCell.num{
  justify-content:flex-end;
  font-variant-numeric:tabular-nums;
  font-weight:950;
}
.cpCell.actionsCell{ justify-content:flex-end; }
.phaseActions{ display:flex; gap:6px; align-items:center; }
.phaseActions .mini{ padding:4px 8px; font-size:.7rem; }

.costRow{
  display:grid;
  grid-template-columns:var(--cost-cols);
  border-bottom:1px solid var(--border);
  min-height:36px;
  transition:background .1s ease;
}
.costRow:hover{ background:rgba(242,204,131,.04); }
body.theme-light .costRow:hover{ background:rgba(41,97,23,.04); }
.costRow:last-child{ border-bottom:none; }
.costPhaseRow.filtered{ display:none; }
.costRow.filtered{ display:none; }
.costRow.collapsed{ display:none; }

.cCell.dev-over{ color:var(--dev-over); }
.cCell.dev-under{ color:var(--dev-under); }
.cCell.dev-ok{ color:var(--dev-ok); }

.cCell > input, .cCell > select{
  border:none; border-radius:0;
  background:transparent; box-shadow:none;
  height:100%; width:100%;
  padding:6px 8px;
  font-size:.82rem; outline:none; color:var(--text);
  font-family:inherit; min-width:0;
}
.cCell > input:focus, .cCell > select:focus{
  box-shadow:inset 0 0 0 2px var(--accent2);
  transform:none;
}
.cCell > input[type=number]{
  text-align:right; font-variant-numeric:tabular-nums;
}
.cCell > select{ padding-right:22px; }
.costReadonly{
  width:100%; display:flex; align-items:center; justify-content:flex-end;
  padding:0 8px; font-variant-numeric:tabular-nums; font-weight:900;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.costReadonly.left{ justify-content:flex-start; font-weight:800; }
.costActionBtns{ display:flex; align-items:center; justify-content:flex-start; width:100%; }
.costDelBtn{
  padding:4px 7px; border-radius:.7rem; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer; font-weight:900; font-size:.75rem;
}
.costDelBtn:hover{ background:rgba(227,66,66,.18); border-color:rgba(227,66,66,.55); }
body.theme-light .costDelBtn:hover{ background:rgba(185,28,28,.16); border-color:rgba(185,28,28,.55); }
.dateHybrid{ font-variant-numeric:tabular-nums; }

.cCell .cIdx{
  font-variant-numeric:tabular-nums;
  font-weight:900;
  color:var(--muted);
  font-size:.82rem;
}

.statusBadge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.statusBadge.st-planned{ background:rgba(107,114,128,.2); color:var(--cost-planned); }
.statusBadge.st-approved{ background:rgba(59,130,246,.2); color:var(--cost-approved); }
.statusBadge.st-invoiced{ background:rgba(245,158,11,.2); color:var(--cost-invoiced); }
.statusBadge.st-paid{ background:rgba(34,197,94,.2); color:var(--cost-paid); }

.catBadge{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px;
  font-size:.72rem; font-weight:800; white-space:nowrap;
}
.catBadge::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.85; }
.catBadge.cat-personal{ background:rgba(139,92,246,.2); color:var(--cat-personal); }
.catBadge.cat-material{ background:rgba(245,158,11,.2); color:var(--cat-material); }
.catBadge.cat-fremdleistung{ background:rgba(59,130,246,.2); color:var(--cat-fremdleistung); }
.catBadge.cat-reise{ background:rgba(236,72,153,.2); color:var(--cat-reise); }
.catBadge.cat-lizenz{ background:rgba(6,182,212,.2); color:var(--cat-lizenz); }
.catBadge.cat-infrastruktur{ background:rgba(249,115,22,.2); color:var(--cat-infrastruktur); }
.catBadge.cat-sonstig{ background:rgba(107,114,128,.2); color:var(--cat-sonstig); }

.costFooter{
  border-top:2px solid var(--accent);
  background:rgba(242,204,131,.08);
}
body.theme-light .costFooter{ background:rgba(41,97,23,.06); }

.costFootCell{
  padding:10px 8px;
  border-right:1px solid var(--border);
  display:flex; align-items:center;
  font-size:.82rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.costFootCell.num{
  justify-content:flex-end;
  font-variant-numeric:tabular-nums;
}
.costFootCell:last-child{ border-right:none; }

.analytics{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.analyticsTop{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.analyticsKpi{
  border:1px solid var(--border);
  border-radius:1rem;
  padding:10px 12px;
  background:rgba(0,0,0,.06);
  min-width:0;
}
body.theme-light .analyticsKpi{ background:rgba(0,0,0,.03); }
.aLbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.aVal{
  margin-top:4px;
  font-weight:950;
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.aHint{ color:var(--muted); font-size:.8rem; line-height:1.35; }

.stackBar{
  border:1px solid var(--border); border-radius:999px; overflow:hidden; height:14px;
  background:rgba(255,255,255,.08); display:flex;
}
body.theme-light .stackBar{ background:rgba(0,0,0,.06); }
.stackSeg{ height:100%; min-width:1px; }

.aTable{
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.aRow{ display:grid; grid-template-columns: 1.2fr 0.8fr 0.55fr 1.2fr; gap:0; border-bottom:1px solid var(--border); min-width:0; }
.aRow:last-child{ border-bottom:none; }
.aCell{
  padding:10px 12px; font-size:.84rem; display:flex; align-items:center; gap:10px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0;
}
.aCell.num{ justify-content:flex-end; font-variant-numeric:tabular-nums; font-weight:900; }
.aHead .aCell{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:900;
  background:rgba(242,204,131,.14);
}
body.theme-light .aHead .aCell{ background:rgba(41,97,23,.12); }

.aBar{
  width:100%; height:10px; border-radius:999px;
  background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08);
}
body.theme-light .aBar{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.06); }
.aBarFill{ height:100%; border-radius:999px; }

.burnSummary{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.burnCard{
  border:1px solid var(--border); border-radius:1rem; padding:10px 12px; background:rgba(0,0,0,.06);
  min-width:0;
}
body.theme-light .burnCard{ background:rgba(0,0,0,.03); }
.progressWrap{
  border:1px solid var(--border); border-radius:1rem; padding:12px; background:rgba(0,0,0,.06);
}
body.theme-light .progressWrap{ background:rgba(0,0,0,.03); }
.progressBar{
  height:12px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08);
}
body.theme-light .progressBar{ background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.06); }
.progressFill{ height:100%; border-radius:999px; width:0%; }
.progressMeta{
  margin-top:8px; display:flex; justify-content:space-between; gap:10px;
  font-size:.82rem; font-variant-numeric:tabular-nums; flex-wrap:wrap;
}
.muted{ color:var(--muted); }

.sparkWrap{ border:1px solid var(--border); border-radius:1rem; overflow:hidden; background:rgba(0,0,0,.04); }
body.theme-light .sparkWrap{ background:rgba(0,0,0,.02); }
#burnSpark{ width:100%; height:120px; display:block; }
#sparkArea{ fill:rgba(34,197,94,.10); }
#sparkLine{ fill:none; stroke:rgba(34,197,94,.85); stroke-width:2.5; vector-effect:non-scaling-stroke; }
#sparkLabel{
  fill:var(--text); font-size:12px; font-weight:800;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}

.devList{ display:flex; flex-direction:column; gap:10px; }
.devRow{
  border:1px solid var(--border); border-radius:1rem; padding:10px 12px; background:rgba(0,0,0,.04);
  display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
}
body.theme-light .devRow{ background:rgba(0,0,0,.02); }
.devTitle{ font-weight:950; font-size:.88rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.devMeta{ margin-top:2px; color:var(--muted); font-size:.76rem; display:flex; gap:10px; flex-wrap:wrap; }
.devRight{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.devAmt{ font-weight:950; font-variant-numeric:tabular-nums; white-space:nowrap; }
.devTag{
  font-size:.74rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; white-space:nowrap;
}
.devTag.over{ background:rgba(239,68,68,.15); color:var(--dev-over); }
.devTag.under{ background:rgba(34,197,94,.15); color:var(--dev-under); }
.devTag.ok{ background:rgba(107,114,128,.15); color:var(--dev-ok); }

dialog{
  border:none; border-radius:1.2rem; padding:0;
  width:min(860px, calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  background:var(--panel); color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
dialog::backdrop{ background:rgba(0,0,0,.55); }
.dlgHead{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.dlgHead h3{ margin:0; font-size:1rem; font-weight:950; letter-spacing:.02em; }
.dlgBody{ padding:12px 14px 6px; max-height:70vh; overflow-y:auto; }
.dlgFoot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 14px; border-top:1px solid var(--border); flex-wrap:wrap; }

.mini{
  padding:7px 10px; border-radius:.85rem;
  border:1px solid var(--border); background:transparent; color:var(--text);
  cursor:pointer; transition:background var(--t), transform var(--t);
  font-weight:800; font-size:.78rem; white-space:nowrap;
}
.mini:hover{ background:var(--panel2); transform:translateY(-1px); }

.grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; }
label{ display:flex; flex-direction:column; gap:4px; font-size:.82rem; min-width:0; }
.labRow{ display:flex; justify-content:space-between; gap:8px; min-width:0; }
.labRow strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.labRow .hint{ font-size:.72rem; color:var(--muted); white-space:nowrap; flex:0 0 auto; }

.phaseBudgetTable{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pbGrid{
  display:grid;
  grid-template-columns:200px repeat(5, minmax(100px, 1fr));
  gap:0;
  border:1px solid var(--border);
  border-radius:.9rem;
  overflow:hidden;
}
.pbCell{
  padding:10px 10px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:.82rem; display:flex; align-items:center; min-width:0;
}
.pbCell:last-child{ border-right:none; }
.pbCell.head{
  background:rgba(242,204,131,.14); font-weight:900; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
}
body.theme-light .pbCell.head{ background:rgba(41,97,23,.12); }
.pbCell.num{ justify-content:flex-end; font-variant-numeric:tabular-nums; font-weight:900; }
.pbCell.total{ background:rgba(242,204,131,.08); font-weight:950; }
body.theme-light .pbCell.total{ background:rgba(41,97,23,.06); }

.budgetBar{
  width:100%; height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:4px;
}
body.theme-light .budgetBar{ background:rgba(0,0,0,.08); }
.budgetBarFill{ height:100%; border-radius:999px; transition:width .3s ease; }
.budgetBarFill.ok{ background:var(--ok); }
.budgetBarFill.warn{ background:var(--cost-invoiced); }
.budgetBarFill.over{ background:var(--danger); }

#analyticsWrap{ display:contents; }

.viewSwitchPanel{ padding-top:12px; padding-bottom:12px; }
.viewSwitchBtns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.moneyInput{ text-align:right; font-variant-numeric:tabular-nums; }
.moneyInput::placeholder{ color:var(--muted); opacity:1; }

.isCollapsedSection{ display:none !important; }

/* =========================
   TABLET-OPTIMIERUNG
   ========================= */
@media (max-width:1300px){
  .layout{ grid-template-columns:1fr; }
  .panel.half{ grid-column:1; }
  .metaRow2{ grid-template-columns:1fr; }
  .overviewRow1{ grid-template-columns:1fr; }
  .kpiGrid{ grid-template-columns:repeat(2, minmax(160px, 1fr)); }
  .analyticsTop{ grid-template-columns:1fr; }
  .burnSummary{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  body{
    padding:14px;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
    padding-top:max(14px, env(safe-area-inset-top));
    padding-bottom:max(14px, env(safe-area-inset-bottom));
  }

  .shell{
    padding:14px;
    border-radius:1.35rem;
    gap:14px;
  }

  .topbar,
  .calcHeader,
  .panelHead,
  .workTop{
    gap:10px;
  }

  .actions,
  .workTop .btns,
  .panelHead .headActions,
  .viewSwitchBtns{
    width:100%;
  }

  .actions .btn,
  .actions label.btn,
  .workTop .btns .btn,
  .panelHead .headActions .btn,
  .viewSwitchBtns .btn{
    flex:1 1 calc(50% - 8px);
  }

  .right{
    width:100%;
    align-items:flex-start;
  }

  .pill{
    width:100%;
    justify-content:flex-start;
    border-radius:1rem;
    padding:8px 10px;
  }

  .metaBoxBody{
    grid-template-columns:120px 1fr;
  }

  :root{
    --cost-cols:
      44px
      240px
      150px
      150px
      150px
      128px
      110px
      110px
      110px
      110px
      110px
      128px
      128px
      140px
      96px;
  }

  .costHeadGrid, .costFootGrid, .costBody{
    min-width:1800px;
  }

  .costFrame{
    border-radius:1rem;
  }

  .costHeadCell,
  .costFootCell,
  .cpCell,
  .cCell{
    font-size:.8rem;
  }

  .costHeadCell{
    padding:10px 7px;
  }

  /* erste zwei Spalten beim horizontalen Scrollen festhalten */
  .costHeadGrid > :nth-child(1),
  .costPhaseRow > :nth-child(1),
  .costRow > :nth-child(1),
  .costFootGrid > :nth-child(1){
    position:sticky;
    left:0;
    z-index:6;
    background:var(--panel);
  }

  .costHeadGrid > :nth-child(2),
  .costPhaseRow > :nth-child(2),
  .costRow > :nth-child(2),
  .costFootGrid > :nth-child(2){
    position:sticky;
    left:44px;
    z-index:5;
    background:var(--panel);
    box-shadow:1px 0 0 var(--border);
  }

  .costHeader .costHeadGrid > :nth-child(1),
  .costHeader .costHeadGrid > :nth-child(2){
    z-index:25;
  }

  .costPhaseRow > :nth-child(1),
  .costPhaseRow > :nth-child(2){
    background:rgba(0,0,0,.12);
  }
  body.theme-light .costPhaseRow > :nth-child(1),
  body.theme-light .costPhaseRow > :nth-child(2){
    background:rgba(0,0,0,.06);
  }

  .costFooter .costFootGrid > :nth-child(1),
  .costFooter .costFootGrid > :nth-child(2){
    background:rgba(242,204,131,.08);
  }
  body.theme-light .costFooter .costFootGrid > :nth-child(1),
  body.theme-light .costFooter .costFootGrid > :nth-child(2){
    background:rgba(41,97,23,.06);
  }

  .phaseBudgetTable .pbGrid{
    min-width:920px;
  }
}

/* =========================
   PHONE-OPTIMIERUNG
   ========================= */
@media (max-width:768px){
  h1{ font-size:1.34rem; }
  .subtitle{ font-size:.84rem; }

  .panel{
    padding:12px 12px 14px;
    border-radius:1.15rem;
  }

  .btn{
    width:100%;
  }

  .actions .btn,
  .actions label.btn,
  .workTop .btns .btn,
  .panelHead .headActions .btn,
  .viewSwitchBtns .btn{
    flex:1 1 100%;
  }

  .workTop .left,
  .workTop .rightControls{
    width:100%;
  }

  .workTitle{
    white-space:normal;
    line-height:1.25;
  }

  .viewToggles{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .filterBar{
    padding:10px;
  }

  .filterGrid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .kpiGrid{
    grid-template-columns:1fr;
  }

  .boxCell .val,
  .aVal{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
  }

  .metaBoxBody{
    grid-template-columns:1fr;
    row-gap:6px;
  }

  .metaLbl{
    font-size:.74rem;
    margin-top:4px;
  }

  .metaVal{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
  }

  .grid{
    grid-template-columns:1fr;
  }

  dialog{
    width:min(860px, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    border-radius:1rem;
  }

  .dlgBody{
    max-height:68vh;
  }

  .dlgFoot{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .dlgFoot .btn{
    width:100%;
  }

  .aTable{
    overflow:auto;
  }

  .aRow{
    min-width:650px;
  }

  .burnSummary{
    grid-template-columns:1fr;
  }

  .progressMeta{
    flex-direction:column;
    align-items:flex-start;
  }

  .devRow{
    grid-template-columns:1fr;
  }

  .devRight{
    align-items:flex-start;
  }

  :root{
    --cost-cols:
      46px
      250px
      150px
      145px
      145px
      118px
      110px
      110px
      110px
      110px
      110px
      122px
      120px
      150px
      88px;
  }

  .costHeadGrid, .costFootGrid, .costBody{
    min-width:1724px;
  }

  .costFrame{
    position:relative;
  }

  .costFrame::after{
    content:"↔ Wischen, um weitere Spalten zu sehen";
    position:sticky;
    left:8px;
    bottom:0;
    display:inline-flex;
    margin:8px;
    padding:4px 8px;
    border-radius:999px;
    font-size:.7rem;
    color:var(--muted);
    background:rgba(0,0,0,.18);
    border:1px solid var(--border);
    pointer-events:none;
  }
  body.theme-light .costFrame::after{
    background:rgba(255,255,255,.7);
  }

  .costHeadCell,
  .costFootCell,
  .cpCell,
  .cCell{
    font-size:.78rem;
  }

  .costHeadCell{
    padding:9px 6px;
  }

  .costReadonly,
  .cCell > input,
  .cCell > select{
    font-size:.78rem;
  }

  .phaseActions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .phaseActions .mini{
    min-height:28px;
  }

  .pbGrid{
    min-width:860px;
  }
}

@media (max-width:560px){
  body{
    padding:10px;
    padding-left:max(10px, env(safe-area-inset-left));
    padding-right:max(10px, env(safe-area-inset-right));
    padding-top:max(10px, env(safe-area-inset-top));
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }

  .shell{
    padding:10px;
    border-radius:1rem;
    gap:12px;
  }

  .topbar{
    align-items:flex-start;
  }

  .brand{
    width:100%;
  }

  .brand img{
    width:24px;
    height:24px;
  }

  .bt strong{
    font-size:.88rem;
  }

  .bt span{
    font-size:.72rem;
  }

  h1{
    font-size:1.2rem;
    line-height:1.15;
  }

  .subtitle{
    font-size:.8rem;
    line-height:1.4;
  }

  .labT,
  .metaBoxHead .ttl,
  .aLbl,
  .panelHead h2,
  .workTitle{
    letter-spacing:.06em;
  }

  .multiSelectPanel{
    left:0; right:0; width:auto; max-width:none;
  }
  .phaseMultiFilterItem{ min-width:0; max-width:none; }
  .kpiGrid{ grid-template-columns:1fr; }

  .panel{
    padding:10px 10px 12px;
    border-radius:1rem;
  }
  
  .projectOverviewHead{
  align-items:flex-start;
  }

  .projectOverviewHeadLeft{
    width:100%;
    flex-wrap:wrap;
    gap:8px;
  }

  .projectSelHead{
    width:100%;
    max-width:none;
    min-width:0;
  }

  .boxCell,
  .analyticsKpi,
  .burnCard,
  .progressWrap{
    border-radius:.9rem;
  }

  .boxCell .val,
  .aVal{
    font-size:.98rem;
  }

  .aRow{
    min-width:620px;
  }

  :root{
    --cost-cols:
      44px
      220px
      140px
      140px
      140px
      114px
      104px
      104px
      104px
      104px
      104px
      118px
      118px
      138px
      84px;
  }

  .costHeadGrid, .costFootGrid, .costBody{
    min-width:1580px;
  }

  .costHeadGrid > :nth-child(2),
  .costPhaseRow > :nth-child(2),
  .costRow > :nth-child(2),
  .costFootGrid > :nth-child(2){
    left:44px;
  }

  .pbGrid{
    min-width:780px;
    grid-template-columns:170px repeat(5, minmax(100px, 1fr));
  }

  .pbCell{
    font-size:.78rem;
    padding:9px 8px;
  }
}