/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --sidebar-bg:    #0f172a;
  --sidebar-hover: #1e293b;
  --accent:        #f97316;
  --accent-dark:   #ea6c0a;
  --accent-light:  #fff7ed;
  --bg:            #f1f5f9;
  --card-bg:       #ffffff;
  --text:          #1e293b;
  --text-muted:    #64748b;
  --border:        #e2e8f0;
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:     0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --radius:        10px;
  --sidebar-w:     240px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul { list-style: none; }

/* ── Layout ────────────────────────────────────────────────────────────────── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 10px;
}
.sidebar-logo-img {
  display: block; width: 100%; max-width: 180px; height: auto;
  margin-bottom: 8px; background: #fff; padding: 10px 12px; border-radius: 8px;
  box-sizing: border-box;
}
.sidebar-logo h1 { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; }
.sidebar-logo p  { color: rgba(255,255,255,.4); font-size: 11px; margin-top: 2px; }

.sidebar-logout-btn {
  width: 100%; padding: 7px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  color: #94a3b8; font-size: 12px; cursor: pointer; transition: background .15s;
}
.sidebar-logout-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.sidebar-nav { padding: 12px 10px; flex: 1; }
.sidebar-nav .nav-section { color: rgba(255,255,255,.3); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 14px 10px 6px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  border: 0;
  padding: 9px 12px; border-radius: 7px; color: rgba(255,255,255,.65);
  background: transparent;
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .15s, color .15s; margin-bottom: 2px;
}
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item .nav-icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  font-size: 11px;
}

/* ── Main content ──────────────────────────────────────────────────────────── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-menu-btn {
  display: none; background: transparent; border: 0; font-size: 22px;
  width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  color: var(--text); margin-right: 6px; padding: 0;
}
.topbar-menu-btn:hover { background: var(--border); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 99; backdrop-filter: blur(2px);
}
.sidebar-backdrop.open { display: block; }

.content { flex: 1; overflow-y: auto; padding: 28px; }

.mobile-tabbar { display: none; }

.page-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.page-toolbar h2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.page-toolbar p { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.page-home-btn { margin-bottom: 6px; padding-left: 0; }
.page-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.list-controls {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px;
}
.admin-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px; align-items: start;
}
.admin-form-card { position: sticky; top: 16px; }
.form-card { max-width: 680px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 7px; font-weight: 600; font-size: 13px;
  transition: background .15s, transform .1s;
  min-height: 36px;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover { background: #cbd5e1; }
.btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}
.btn[disabled]:hover { background: var(--border); }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--border); }
.btn-danger { background: #fef2f2; color: #ef4444; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title { font-size: 14px; font-weight: 700; }
.card-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Stat cards ────────────────────────────────────────────────────────────── */
.dashboard-brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 20px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.dashboard-brand-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dashboard-brand-logo {
  width: 190px; height: auto; object-fit: contain; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.dashboard-brand h2 { font-size: 20px; font-weight: 800; line-height: 1.2; }
.dashboard-brand p { margin-top: 3px; color: var(--text-muted); font-size: 13px; }
.dashboard-brand-action { flex-shrink: 0; }
.dashboard-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.focus-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0;
}
/* Status wird über den Count-Chip getragen, nicht über einen Seitenstreifen
   (DESIGN.md: Status-im-Detail-Regel; Seitenstreifen > 1px sind verboten). */
.focus-card.urgent .focus-count   { background: #fef2f2; color: #dc2626; }
.focus-card.material .focus-count  { background: #f0fdf4; color: #16a34a; }
.focus-card.subs .focus-count      { background: #fffbeb; color: #b45309; }
.focus-card.sales .focus-count     { background: #eff6ff; color: #2563eb; }
.focus-card.finance .focus-count   { background: #f0fdf4; color: #16a34a; }
.focus-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.focus-title { font-size: 14px; font-weight: 800; }
.focus-subtitle { margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.focus-count {
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #f1f5f9;
  font-size: 12px; font-weight: 800; color: #475569;
}
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-item {
  width: 100%;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 2px 10px;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
  transition: border-color .15s, background .15s, transform .1s;
}
.task-item:hover { background: #fff; border-color: #cbd5e1; transform: translateY(-1px); }
.task-item:focus-visible { outline: 3px solid rgba(249,115,22,.22); outline-offset: 2px; }
.task-item.danger { background: #fff7ed; border-color: #fed7aa; }
.task-date {
  grid-row: span 2;
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
}
.task-main {
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  vertical-align: 1px;
}
.task-category-pv { background: #ffedd5; color: #c2410c; }
.task-category-wp { background: #e0f2fe; color: #0369a1; }
.task-category-kombi { background: #fef3c7; color: #92400e; }
.task-category-material { background: #dcfce7; color: #15803d; }
.task-category-sub { background: #fef3c7; color: #b45309; }
.task-sub {
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-empty {
  padding: 14px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  background: #f8fafc;
  font-size: 12px;
  text-align: center;
}
.dashboard-freshness { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; display: flex; align-items: center; gap: 16px;
}
.stat-card-clickable {
  width: 100%;
  border: 1px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.stat-card-clickable:hover {
  border-color: #fdba74;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stat-card-clickable:focus-visible {
  outline: 3px solid rgba(249,115,22,.22);
  outline-offset: 2px;
}
.stat-icon {
  width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.stat-icon.orange  { background: #fff7ed; color: #ea580c; }
.stat-icon.blue    { background: #eff6ff; color: #1d4ed8; }
.stat-icon.green   { background: #f0fdf4; color: #16a34a; }
.stat-icon.purple  { background: #faf5ff; color: #9333ea; }
.stat-icon.yellow  { background: #fefce8; color: #ca8a04; }
.stat-icon.red     { background: #fef2f2; color: #dc2626; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* ── Projektzentrale (Dashboard-Neubau: Umsetzung nach Vertragsabschluss) ── */
.pz-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.pz-header-title h1 { font-size: 22px; font-weight: 800; color: var(--text); }
.pz-header-title p { margin-top: 2px; color: var(--text-muted); font-size: 13px; }
.pz-header-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-header-filters input, .pz-header-filters select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: var(--card-bg); outline: none;
}
.pz-header-filters input { width: 240px; }
.pz-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.pz-kpi-card {
  background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid transparent; transition: border-color .15s, transform .1s;
}
.pz-kpi-card:hover { border-color: var(--border); transform: translateY(-1px); }
.pz-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pz-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.pz-column { display: flex; flex-direction: column; gap: 16px; }
.pz-section { margin-bottom: 16px; }
.pz-count {
  min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #f1f5f9; font-size: 12px; font-weight: 800; color: #475569; padding: 0 8px;
}
.pz-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; margin-bottom: 8px; text-align: left; color: var(--text);
  transition: border-color .15s, background .15s;
}
.pz-row:not(.pz-row-static) { cursor: pointer; }
.pz-row:not(.pz-row-static):hover { border-color: #cbd5e1; background: #f8fafc; }
.pz-row.pz-row-danger { background: #fff7ed; border-color: #fed7aa; }
.pz-row-kunde { font-weight: 700; font-size: 13px; min-width: 130px; }
.pz-row-problem { flex: 1; min-width: 160px; font-size: 13px; }
.pz-row-schritt, .pz-row-verantwortlich, .pz-row-faellig, .pz-row-projekt,
.pz-row-kategorie, .pz-row-prio, .pz-row-lieferant, .pz-row-betrag {
  font-size: 12px; color: var(--text-muted); min-width: 90px;
}
.pz-row-betrag { font-weight: 700; color: var(--text); }
.pz-ampel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pz-ampel-danger { background: #dc2626; }
.pz-ampel-warning { background: #f59e0b; }
.pz-ampel-success { background: #16a34a; }
.pz-pipeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.pz-pipeline-cluster { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #f8fafc; }
.pz-pipeline-cluster-head {
  font-weight: 800; font-size: 13px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 8px;
}
.pz-pipeline-cluster-body { display: flex; flex-direction: column; gap: 6px; }
.pz-pipeline-item {
  text-align: left; padding: 7px 9px; border-radius: 6px; background: #fff;
  border: 1px solid var(--border); font-size: 12px; cursor: pointer;
}
.pz-pipeline-item:hover { border-color: #cbd5e1; }
@media (max-width: 1100px) { .pz-columns { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .pz-header-filters input { width: 100%; }
  .pz-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #f8fafc; }
td { padding: 11px 14px; font-size: 13px; }
.td-name { font-weight: 600; }
.td-muted { color: var(--text-muted); font-size: 12px; }

/* ── Dashboard Projektmatrix ─────────────────────────────────────────────── */
.project-matrix-card { overflow: hidden; }
.project-matrix-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.project-matrix-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.matrix-filter-control {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 7px 10px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.matrix-search { min-width: 190px; }
.project-matrix-section + .project-matrix-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.project-matrix-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.project-matrix-section-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}
.project-matrix-section-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.matrix-count {
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
}
.project-matrix-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.project-matrix-table {
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
}
.project-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #e2e8f0;
  color: #334155;
  padding: 8px 7px;
  font-size: 10px;
  letter-spacing: 0;
}
.project-matrix-table td {
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #edf2f7;
  padding: 6px;
  vertical-align: top;
  background: #fff;
  min-width: 112px;
}
.project-matrix-table tr:last-child td { border-bottom: 0; }
.project-matrix-table td:first-child {
  min-width: 190px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 #e2e8f0;
}
.project-matrix-table tbody tr:hover td { background: #fff7ed; }
.project-matrix-table tbody tr:hover td:first-child { background: #fff7ed; }
.matrix-customer {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 8px;
  align-items: center;
}
.matrix-row-number {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e0f2fe;
  color: #0369a1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
}
.matrix-customer-btn {
  border: 0;
  background: transparent;
  color: #1d4ed8;
  text-align: left;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-decoration: underline;
  cursor: pointer;
}
.matrix-customer .badge {
  grid-column: 2;
  justify-self: start;
}
.matrix-text {
  color: #1e293b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 190px;
}
.matrix-cell,
.matrix-note-cell {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 6px 7px;
  background: #f8fafc;
  color: #1e293b;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  line-height: 1.18;
}
.matrix-cell strong,
.matrix-note-cell strong {
  font-size: 11px;
  font-weight: 900;
}
.matrix-cell span,
.matrix-note-cell span {
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}
.matrix-cell em {
  color: #64748b;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
}
.matrix-cell:hover,
.matrix-note-cell:hover {
  filter: brightness(.985);
  box-shadow: 0 1px 5px rgba(15,23,42,.08);
}
/* Nur "danger" (braucht Handeln) bekommt eine volle Farbfläche. "success"/
   "warning" sind der Normalfall auf dieser Seite (die meisten Zellen), daher
   nur ein farbiger Rand als dezenter Hinweis statt Vollflächenfarbe — sonst
   verliert Rot seine Signalwirkung gegen ein Meer aus Grün/Orange. */
.matrix-cell-success {
  background: #f8fafc;
  border-color: #86efac;
  color: #1e293b;
}
.matrix-cell-warning {
  background: #f8fafc;
  border-color: #fdba74;
  color: #1e293b;
}
.matrix-cell-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.matrix-cell-neutral,
.matrix-note-cell {
  background: #f8fafc;
  border-color: #dbe3ee;
}
.matrix-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 24px !important;
  background: #f8fafc !important;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-neu         { background: #f1f5f9; color: #64748b; } .badge-neu::before         { background: #94a3b8; }
.badge-vorbereitung{ background: #eff6ff; color: #3b82f6; } .badge-vorbereitung::before{ background: #3b82f6; }
.badge-montage{ background: #fff7ed; color: #f97316; } .badge-montage::before{ background: #f97316; }
.badge-inbetriebnahme{ background: #ecfeff; color: #0891b2; } .badge-inbetriebnahme::before{ background: #0891b2; }
.badge-nacharbeiten{ background: #fef3c7; color: #d97706; } .badge-nacharbeiten::before{ background: #d97706; }
.badge-abgeschlossen{ background: #f0fdf4; color: #16a34a; } .badge-abgeschlossen::before{ background: #16a34a; }
.badge-success{ background: #f0fdf4; color: #16a34a; } .badge-success::before{ background: #16a34a; }
.badge-warning{ background: #fff7ed; color: #f97316; } .badge-warning::before{ background: #f97316; }
.badge-danger{ background: #fef2f2; color: #dc2626; } .badge-danger::before{ background: #dc2626; }
.badge-info{ background: #eff6ff; color: #2563eb; } .badge-info::before{ background: #2563eb; }
.badge-neutral{ background: #f1f5f9; color: #64748b; } .badge-neutral::before{ background: #94a3b8; }
.badge-pv { background: #eff6ff; color: #1d4ed8; padding: 3px 8px; }
.badge-pv::before  { display: none; }
.badge-wp { background: #fdf4ff; color: #9333ea; padding: 3px 8px; }
.badge-wp::before  { display: none; }
.badge-kombi { background: #fefce8; color: #b45309; padding: 3px 8px; }
.badge-kombi::before { display: none; }

/* ── Kanban ────────────────────────────────────────────────────────────────── */
/* 6 Status-Spalten: fester Grid statt Auto-Fit, damit die Pipeline-Reihenfolge
   (neu → vorbereitung → montage → inbetriebnahme → nacharbeiten → abgeschlossen)
   erhalten bleibt; horizontales Scrollen statt Zeilenumbruch/Stauchen (DESIGN.md: nicht überladen). */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.kanban-col { background: #f8fafc; border-radius: var(--radius); padding: 14px; min-height: 120px; scroll-snap-align: start; }
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.kanban-count { background: var(--border); color: var(--text-muted); border-radius: 20px; padding: 1px 7px; font-size: 11px; }
.kanban-card {
  background: #fff; border-radius: 8px; padding: 12px;
  box-shadow: var(--shadow); margin-bottom: 10px; cursor: pointer;
  transition: box-shadow .15s, transform .15s; border: 1px solid var(--border);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.is-dragging { opacity: .5; cursor: grabbing; }
.kanban-col.is-drop-target { outline: 2px dashed #f97316; outline-offset: -2px; background: #fff7ed; }
.kanban-col.is-saving { opacity: .6; pointer-events: none; }
/* Typ über volle, getönte Border + BG-Tönung statt Seitenstreifen (DESIGN.md). */
.kanban-card.pv { border-color: #bfdbfe; background: #eff6ff; }
.kanban-card.wp { border-color: #e9d5ff; background: #faf5ff; }
.kanban-card.kombi { border-color: #fed7aa; background: #fff7ed; }
.kanban-card-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.kanban-card-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.kanban-card-note { font-size: 11px; color: #f97316; margin-top: 6px; background: #fff7ed; padding: 4px 7px; border-radius: 4px; }

/* ── Vertrieb Cockpit ─────────────────────────────────────────────────────── */
.sales-stats .stat-value { font-size: 18px; }
.sales-help {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.45;
}
.sales-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.sales-col {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 160px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.sales-col.is-drop-target {
  border-color: var(--accent);
  background: #fff7ed;
  box-shadow: inset 0 0 0 1px rgba(249,115,22,.22);
}
.sales-col.is-saving {
  opacity: .72;
}
.sales-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sales-col-head strong {
  background: var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}
.sales-empty {
  padding: 22px 8px;
  text-align: center;
  color: #475569;
  font-size: 12px;
}
.sales-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 10px;
  cursor: grab;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.sales-card:active { cursor: grabbing; }
.sales-card.is-dragging {
  opacity: .55;
  transform: rotate(.35deg) scale(.99);
  box-shadow: var(--shadow-md);
}
.sales-card--warning { border-color: #fed7aa; background: #fff7ed; }
.sales-card--danger { border-color: #fecaca; background: #fef2f2; }
.sales-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sales-card-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 5px;
}
.sales-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 11px;
}
.sales-card-money {
  margin: 12px 0 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}
.sales-routing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  border-radius: 7px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 11px;
}
.sales-routing-strip.is-office {
  background: #fef2f2;
  color: #991b1b;
}
.sales-routing-strip.is-reonic {
  background: #fff7ed;
  color: #9a3412;
}
.sales-routing-strip strong {
  color: var(--text);
  font-weight: 800;
}
.sales-appointment-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  padding: 8px;
  border-radius: 7px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
}
.sales-appointment-strip button,
.week-event-ics {
  border: 0;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  cursor: pointer;
}
.sales-card-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 5px 8px;
  font-size: 12px;
}
.sales-card-grid span { color: var(--text-muted); }
.sales-card-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sales-stage-control {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}
.sales-stage-control label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sales-stage-control select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  padding: 7px 9px;
}
.sales-note {
  margin-top: 10px;
  padding: 8px;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 12px;
}
.sales-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.sales-actions .btn {
  width: 100%;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}
.sales-card--missing-name {
  border-color: #fecaca;
  background: #fffafa;
}
.sales-card-reonic {
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}
.sales-admin-diagnostic {
  margin-top: 5px;
  color: #b45309;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.week-event-sales {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.sales-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, .55);
}
.sales-contact-card {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.sales-mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sales-mini-item {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  color: var(--text);
}
.sales-mini-item.sales-card--warning { border-color: #fed7aa; background: #fffbeb; }
.sales-mini-item.sales-card--danger { border-color: #fecaca; background: #fef2f2; }
.sales-mini-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}
.sales-mini-sub {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}
/* ── Phasen tracker ────────────────────────────────────────────────────────── */
.phases-list { display: flex; flex-direction: column; gap: 12px; }
.phase-row {
  display: grid; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--card-bg);
  border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: border-color .2s;
}
.phase-row.pv-row  { grid-template-columns: 2fr 1.5fr 1.5fr 120px; }
.phase-row.wp-row  { grid-template-columns: 2fr 1.5fr 1.5fr 120px; }
.phase-row.done    { border-color: #bbf7d0; background: #f0fdf4; }
.phase-row.active  { border-color: #fed7aa; background: #fff7ed; }
.phase-row.pending { border-color: var(--border); }
.phase-num { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
.phase-name { font-weight: 700; font-size: 13px; }
.phase-sub  { font-size: 12px; color: var(--text-muted); }
.phase-date { font-size: 12px; color: var(--text-muted); }

.phase-status-select {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; background: var(--bg); cursor: pointer;
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text); }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; color: var(--text); background: var(--card-bg);
  transition: border-color .15s, box-shadow .15s; outline: none;
  width: 100%; min-width: 0;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-section { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ── Detail header ─────────────────────────────────────────────────────────── */
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.detail-title  { font-size: 22px; font-weight: 800; }
.detail-meta   { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px; align-items: start;
}
.project-detail-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.project-detail-tab {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  min-height: 36px;
}
.project-detail-tab:hover { background: #f8fafc; color: var(--text); }
.project-detail-tab.is-active {
  background: var(--accent);
  color: #fff;
}
.project-tabbed-layout {
  grid-template-columns: 1fr;
}
.project-tabbed-layout > div:first-child { display: contents; }
[data-project-tab-section] { display: none; }
[data-project-tab-section].is-active { display: block; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.info-item label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 3px; }
.info-item span  { font-size: 13px; font-weight: 500; }

/* ── Subunternehmer table ──────────────────────────────────────────────────── */
.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sub-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.sub-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sub-card-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.sub-card-typ  { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-light); padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 10px; }
.sub-card-info { font-size: 12px; color: var(--text-muted); display: flex; flex-direction: column; gap: 3px; }
.sub-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.sub-card-actions .btn { flex: 1; justify-content: center; }
.sub-account-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.sub-account-toolbar strong { display: block; font-size: 14px; color: var(--text); }
.sub-account-toolbar span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sub-account-badge { flex: 0 0 auto; border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.sub-account-success { color: #047857; background: #d1fae5; }
.sub-account-warning { color: #b45309; background: #fef3c7; }
.sub-account-danger { color: #b91c1c; background: #fee2e2; }
.sub-account-muted { color: #64748b; background: #f1f5f9; }
.sub-account-hint { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 12px; line-height: 1.35; }
.sub-portal-project-list { display: flex; flex-direction: column; gap: 10px; }
.sub-portal-project-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: #fff; }
.sub-portal-project-card strong,
.sub-portal-project-card span,
.sub-portal-project-card small { display: block; }
.sub-portal-project-card span { margin-top: 3px; color: #475569; font-size: 13px; }
.sub-portal-project-card small { margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 600; }
.vertriebler-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.vertriebler-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px;
}
.vertriebler-summary-card span,
.vertriebler-kpi span {
  color: var(--text-muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.vertriebler-summary-card strong {
  color: var(--text);
  display: block;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 6px;
}
.vertriebler-summary-card.is-danger,
.vertriebler-kpi.is-danger {
  background: #fef2f2;
  border-color: #fecaca;
}
.vertriebler-summary-card.is-danger strong,
.vertriebler-kpi.is-danger strong { color: #dc2626; }
.vertriebler-summary-card.is-success,
.vertriebler-kpi.is-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.vertriebler-summary-card.is-success strong,
.vertriebler-kpi.is-success strong { color: #16a34a; }
.vertriebler-kpi-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
.vertriebler-kpi {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
  padding: 10px;
}
.vertriebler-kpi strong {
  color: var(--text);
  display: block;
  font-size: 18px;
  line-height: 1.1;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #1e293b; color: #fff; padding: 12px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(80px); opacity: 0;
  transition: transform .3s, opacity .3s; pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; }
/* Status trägt das ✓/✗-Präfix (app.js); hier nur dezente volle Border statt Seitenstreifen. */
#toast.success { border: 1px solid #16a34a; }
#toast.error   { border: 1px solid #ef4444; }

/* ── Demo mode banner ──────────────────────────────────────────────────────── */
.demo-banner {
  background: #fffbeb; border-bottom: 1px solid #fcd34d;
  padding: 8px 28px; font-size: 12px; color: #92400e;
  display: flex; align-items: center; gap: 8px;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ── Loading ───────────────────────────────────────────────────────────────── */
.loading { text-align: center; padding: 40px; color: var(--text-muted); }
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Checkbox toggle ───────────────────────────────────────────────────────── */
.toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 20px; cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%;
  left: 3px; top: 3px; transition: transform .2s;
}
.toggle input:checked + .toggle-slider { background: #22c55e; }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── Fortschrittsbalken ────────────────────────────────────────────────────── */
.progress-wrap {
  position: relative; background: #e2e8f0; border-radius: 20px;
  height: 7px; overflow: visible; min-width: 80px;
}
.progress-bar  { width: 100%; height: 100%; border-radius: 20px; transform: scaleX(0); transform-origin: left center; transition: transform .4s; }
.progress-label { position: absolute; right: 0; top: -14px; font-size: 10px; font-weight: 700; color: var(--text-muted); }

/* ── Phasen (neue Version) ─────────────────────────────────────────────────── */
.phases-list { display: flex; flex-direction: column; gap: 8px; }
.phase-row {
  display: grid; grid-template-columns: 200px 1fr 1fr 140px;
  align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 8px;
  background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.phase-row.done    { border-color: #bbf7d0; background: #f0fdf4; }
.phase-row.active  { border-color: #fed7aa; background: #fff7ed; }
.phase-row.pending { border-color: var(--border); }
.phase-label { display: flex; flex-direction: column; gap: 2px; }
.phase-num   { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.phase-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.phase-status-text { font-size: 12px; font-weight: 600; }
.text-green { color: #16a34a; }
.text-muted { color: var(--text-muted); }
.phase-select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; font-weight: 500; background: #fff; cursor: pointer;
  width: 100%; outline: none;
  transition: border-color .15s;
}
.phase-select:focus { border-color: var(--accent); }
.date-inp { font-family: inherit; color: var(--text); }

/* ── Kommunikationslog ─────────────────────────────────────────────────────── */
.log-entry { padding: 10px 12px; background: #fff7ed; border-radius: 7px; border: 1px solid #fed7aa; }
.log-meta  { font-size: 11px; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 4px; }
.log-text  { font-size: 13px; color: var(--text); margin: 0; line-height: 1.5; }

/* ── Edit Modal ────────────────────────────────────────────────────────────── */
#edit-modal { animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#edit-modal .card { animation: slideUp .2s ease; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Suche ─────────────────────────────────────────────────────────────────── */
.search-wrap { display: flex; gap: 8px; align-items: center; }
#suche:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); outline: none; }
/* Sales-Cockpit: Suche + Filter brauchen denselben sichtbaren Fokus-Ring
   (Inputs sind inline outline:none; der box-shadow-Ring trägt die Sichtbarkeit). */
#sales-suche:focus,
#sales-filter-vertriebler:focus,
#sales-filter-stage:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); outline: none; }

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .demo-banner, button, #edit-modal, form { display: none !important; }
  .main { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) { .phase-row { grid-template-columns: 180px 1fr 1fr 120px; } }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .dashboard-focus-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .phase-row { grid-template-columns: 1fr 1fr; gap: 8px; } .phase-row > :nth-child(4) { grid-column: 1/-1; } }
@media (max-width: 800px) {
  .topbar-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
    transform: translateX(-100%); transition: transform .24s ease;
    width: 260px; box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar.open { transform: translateX(0); }
  .topbar { padding: 0 14px; height: 56px; position: sticky; top: 0; z-index: 50; }
  .content { padding: 16px 14px 86px; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .sub-grid { grid-template-columns: 1fr 1fr; }
  .task-card {
    min-width: 0;
    overflow: hidden;
  }
  .task-card .sub-card-name,
  .task-card .sub-card-info,
  .task-card p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .topbar-actions .btn { min-height: 40px; }
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(6, 1fr);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(15,23,42,.08);
    backdrop-filter: blur(12px);
  }
  .mobile-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 50px; border-radius: 8px;
    color: var(--text-muted); font-size: 11px; font-weight: 700;
  }
  .mobile-nav-item span { font-size: 18px; line-height: 1; }
  .mobile-nav-item.active { background: var(--accent-light); color: var(--accent); }
  .mobile-nav-primary {
    background: var(--accent); color: #fff;
    box-shadow: 0 8px 20px rgba(249,115,22,.25);
  }
  .mobile-nav-primary.active { background: var(--accent-dark); color: #fff; }
  .page-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .page-toolbar h2 { font-size: 20px; }
  .page-toolbar-actions, .page-toolbar-actions .btn { width: 100%; justify-content: center; }
  .list-controls, .search-wrap { width: 100%; }
  .search-wrap { flex-direction: column; align-items: stretch; }
  #suche, #filter-typ { width: 100% !important; min-height: 42px; }
  .admin-layout, .detail-layout { grid-template-columns: 1fr; }
  .admin-form-card { position: static; order: -1; }
  .detail-header { flex-direction: column; gap: 12px; }
  .detail-actions { width: 100%; justify-content: stretch; }
  .detail-actions .btn, .detail-actions a { flex: 1; justify-content: center; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .task-item { grid-template-columns: 72px minmax(0, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .kanban { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr; overflow-x: visible; }
  .sales-board { grid-template-columns: 1fr; overflow: visible; }
  .sales-actions { grid-template-columns: 1fr; }
  .mobile-nav-item { font-size: 10px; }
  .topbar-title { font-size: 14px; }
  .topbar-actions .btn { padding: 7px 10px; font-size: 12px; }
  .info-grid, .sub-grid { grid-template-columns: 1fr; }
  .task-card p {
    max-height: 220px;
    overflow: auto;
  }
  .dashboard-brand { align-items: stretch; flex-direction: column; padding: 14px; }
  .dashboard-brand-copy { align-items: flex-start; flex-direction: column; gap: 10px; }
  .dashboard-brand-logo { width: min(230px, 100%); }
  .dashboard-brand h2 { font-size: 18px; }
  .dashboard-brand-action { width: 100%; justify-content: center; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 38px; height: 38px; font-size: 18px; }
  .stat-value { font-size: 22px; }
  .card { padding: 16px; }
  .card-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .card-header .btn { width: 100%; justify-content: center; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tr { padding: 12px 0; }
  .table-wrap td { padding: 5px 0; }
  .sub-card-actions { grid-template-columns: 1fr; }
  .sub-account-toolbar { align-items: stretch; flex-direction: column; }
  .sub-account-toolbar .btn { width: 100%; justify-content: center; }
  .sub-portal-project-card { align-items: stretch; flex-direction: column; }
  .sub-portal-project-card .btn { width: 100%; justify-content: center; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .gewerk-head { align-items: stretch; flex-direction: column; }
  .gewerk-status { min-width: 0; width: 100%; }
  .gewerk-fotos-actions, .foto-upload-btn { width: 100%; }
  .gewerk-fotos-actions { flex-direction: column; }
  .foto-upload-btn { justify-content: center; }
  .technik-summary, .admin-photo-template-grid { grid-template-columns: 1fr; }
  .admin-photo-slot-head { flex-direction: column; align-items: stretch; }
}

/* ── Login Screen ──────────────────────────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; background: var(--bg);
}
.login-hero {
  flex: 1; background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #f97316 150%);
  color: #fff; padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  position: relative; overflow: hidden;
}
.login-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(249,115,22,.2), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(59,130,246,.15), transparent 60%);
  pointer-events: none;
}
.login-hero > * { position: relative; z-index: 1; }
.login-logo {
  width: 280px; height: auto; background: #fff;
  padding: 18px 22px; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); align-self: flex-start;
  margin-bottom: 8px;
}
.login-hero h1 {
  font-size: 36px; font-weight: 800; line-height: 1.15; margin-top: 12px;
}
.login-tagline { font-size: 17px; color: rgba(255,255,255,.85); font-weight: 500; }
.login-hero-footer {
  margin-top: auto; font-size: 13px; color: rgba(255,255,255,.6);
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
}

.login-form-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px;
  background: #fff;
}
.login-form { width: 100%; max-width: 380px; }
.login-form h2 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.login-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
.login-form .form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--text); }
.login-form input[type="email"],
.login-form input[type="password"] {
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}

.login-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 0 20px; font-size: 13px;
}
.login-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.login-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.login-forgot { color: var(--accent); font-weight: 600; }
.login-forgot:hover { text-decoration: underline; }

.login-error {
  min-height: 18px; color: #ef4444; font-size: 13px; font-weight: 500;
  margin-bottom: 12px;
}

.login-submit {
  width: 100%; padding: 13px; font-size: 14px; font-weight: 700;
  justify-content: center; border-radius: 8px;
}
.login-submit:disabled { opacity: .6; cursor: wait; }

.login-legal {
  margin-top: 28px; font-size: 11px; color: var(--text-muted); text-align: center;
}

@media (max-width: 900px) {
  .login-screen { flex-direction: column; }
  .login-hero { padding: 40px 32px; flex: 0 0 auto; }
  .login-hero h1 { font-size: 26px; }
  .login-hero-footer { display: none; }
  .login-form-wrap { flex: 1; padding: 32px 24px; }
}

/* ── Gewerke ──────────────────────────────────────────────────────────────── */
.gewerke-list { display: flex; flex-direction: column; gap: 10px; }
.gewerk-card {
  border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; background: #fff;
  transition: border-color .2s;
}
.gewerk-card.active { border-color: #fed7aa; background: #fff7ed; }
.gewerk-card.done   { border-color: #bbf7d0; background: #f0fdf4; }
.gewerk-card.dirty { box-shadow: 0 0 0 2px rgba(249, 115, 22, .18); }
.gewerk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gewerk-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; }
.gewerk-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--border); color: var(--text-muted);
  border-radius: 6px; font-size: 11px; font-weight: 700;
}
.gewerk-card.active .gewerk-num { background: #f97316; color: #fff; }
.gewerk-card.done   .gewerk-num { background: #22c55e; color: #fff; }
.gewerk-status { min-width: 130px; }
.gewerk-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px;
}
.gewerk-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.gewerk-extra-grid.single { grid-template-columns: 1fr; }
/* Förderberatung: nur Subunternehmer-Spalte, keine Baustart-Termine */
.gewerk-grid.gewerk-grid-foerder { grid-template-columns: 1fr; }
.gewerk-foerder-hint {
  margin-top: 10px; padding: 8px 12px; font-size: 12px;
  color: var(--text-muted); background: var(--bg-subtle, #f1f5f9);
  border-left: 3px solid #8b5cf6; border-radius: 6px;
}
/* Förder-Vorprüfung (v3.26) */
.foerder-vorpruefung { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; margin:14px 0; }
.foerder-vorpruefung.is-incomplete { border-left:4px solid #eab308; }
.foerder-vorpruefung.is-complete { border-left:4px solid #16a34a; }
.foerder-vorpruefung .vp-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.foerder-vorpruefung .vp-head strong { font-size:15px; color:#0f172a; }
.foerder-vorpruefung .vp-progress { font-size:12px; font-weight:700; color:#b45309; background:#fef3c7; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.foerder-vorpruefung .vp-progress.ok { color:#047857; background:#d1fae5; }
.foerder-vorpruefung .vp-hint { font-size:12px; color:#64748b; margin:0 0 12px; }
.foerder-vorpruefung .vp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.foerder-vorpruefung .vp-req { color:#dc2626; }
.foerder-vorpruefung .vp-checkbox { flex-direction:row; align-items:center; gap:8px; }
.foerder-vorpruefung .vp-docs { margin-top:12px; padding-top:12px; border-top:1px dashed var(--border,#e2e8f0); }
.foerder-vorpruefung .vp-docs-title { font-size:12px; font-weight:700; color:#475569; margin-bottom:6px; }
.foerder-vorpruefung .vp-doc { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; padding:4px 0; }
.foerder-vorpruefung .vp-doc.is-missing { color:#b45309; }
.foerder-vorpruefung .vp-doc.is-ok { color:#047857; }
.foerder-vorpruefung .vp-actions { display:flex; align-items:center; gap:12px; margin-top:14px; }
.foerder-vorpruefung .vp-ok-badge { color:#047857; font-size:13px; font-weight:700; }
.foerder-vorpruefung .vp-warn-badge { color:#b45309; font-size:13px; font-weight:600; }
@media (max-width:640px){ .foerder-vorpruefung .vp-grid { grid-template-columns:1fr; } }
/* v3.27: Pflichtdoc-Upload + Sub-Portal-Thread */
.vp-doc-label { display:flex; flex-direction:column; gap:2px; }
.vp-doc-hint { color:#94a3b8; font-size:11px; font-weight:400; }
.vp-doc-right { display:flex; align-items:center; gap:8px; }
.vp-doc-upload { cursor:pointer; white-space:nowrap; }
.sub-foerder-thread { margin-top:18px; }
.sub-thread-list { display:flex; flex-direction:column; gap:8px; margin:10px 0; max-height:340px; overflow-y:auto; }
.sub-thread-msg { padding:8px 12px; border-radius:10px; font-size:13px; max-width:85%; }
.sub-thread-msg.is-mine { align-self:flex-end; background:#fff7ed; border:1px solid #fed7aa; }
.sub-thread-msg.is-office { align-self:flex-start; background:#f1f5f9; border:1px solid #e2e8f0; }
.sub-thread-meta { font-size:11px; color:#64748b; margin-bottom:3px; }
.sub-thread-text { color:#0f172a; white-space:pre-wrap; }
.sub-thread-compose { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sub-thread-compose textarea { width:100%; }
.foerder-reply-box { display:flex; gap:8px; margin-top:12px; align-items:flex-end; }
.foerder-reply-input { flex:1; }
.foerder-thread-from { color:#475569; font-weight:600; }
/* v3.28: KfW-Timing-Banner (Baustart/Bauende) */
.foerder-timing-banner { display:flex; gap:10px; align-items:flex-start; background:#eff6ff; border:1px solid #bfdbfe; border-left:4px solid #3b82f6; border-radius:10px; padding:12px 14px; margin:12px 0; font-size:13px; color:#1e3a5f; }
.foerder-timing-banner.is-critical { background:#fef2f2; border-color:#fecaca; border-left-color:#dc2626; color:#7f1d1d; }
.foerder-timing-banner .ft-icon { font-size:18px; line-height:1; }
.foerder-timing-banner .ft-body > div { margin:2px 0; }
.foerder-timing-banner .ft-warn { color:#dc2626; font-weight:700; }
.foerder-timing-banner .ft-muted { color:#64748b; }
/* v3.31: Sonderfreigabe-Anfrage (EB) */
.sub-sonder-box { background:#fffbeb; border:1px solid #fde68a; border-left:4px solid #f59e0b; border-radius:10px; padding:12px 14px; margin:12px 0; }
.sub-sonder-info { font-size:13px; color:#78350f; line-height:1.45; margin-bottom:10px; }
.foerder-akte-hint { font-size:12px; color:#475569; background:#f1f5f9; border-radius:8px; padding:8px 12px; margin-bottom:10px; }
.foerder-akte-hint.is-warn { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
/* v3.30: EB-Account KPIs + Hinweise */
.sub-foerder-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 14px; }
.sub-foerder-kpi { display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#fff; border:1px solid #e2e8f0; border-left-width:4px; border-radius:10px; padding:12px 14px; text-align:left; }
.sub-foerder-kpi .kpi-val { font-size:22px; font-weight:800; }
.sub-foerder-kpi .kpi-lbl { font-size:12px; color:#64748b; font-weight:600; }
.sub-foerder-hinweise:empty { display:none; }
.sub-hinweise-card { background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:14px 16px; margin:0 0 16px; }
.sub-hinweise-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#9a3412; }
.sub-hinweise-clear { background:none; border:none; color:#c2410c; font-size:12px; font-weight:600; cursor:pointer; }
.sub-hinweis { padding:8px 0; border-top:1px solid #fed7aa; font-size:13px; color:#0f172a; }
.sub-hinweis:first-of-type { border-top:none; }
.sub-hinweis-kind { display:inline-block; background:#ffedd5; color:#9a3412; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; text-transform:uppercase; margin-right:6px; }
.sub-hinweis-body { color:#475569; font-size:12px; margin-top:3px; }
@media (max-width:640px){ .sub-foerder-kpis { grid-template-columns:repeat(2,1fr); } }
.gewerk-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.gewerk-field .phase-select { font-size: 13px; }
.gewerk-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.file-action {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.file-action input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.gewerk-foto-hint {
  margin-top: 10px; padding: 6px 10px;
  font-size: 11px; color: var(--text-muted);
  background: #f8fafc; border-radius: 6px;
}

/* ── Nacharbeiten ────────────────────────────────────────────────────────── */
.nacharbeiten-card .card-header { align-items: flex-start; }
.nacharbeit-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 12px;
  font-weight: 800;
}
.nacharbeit-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.nacharbeit-form .nacharbeit-note,
.nacharbeit-form .btn {
  grid-column: 1 / -1;
}
.nacharbeiten-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.nacharbeit-item {
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
}
.nacharbeit-item.nacharbeit-erledigt {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.nacharbeit-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.nacharbeit-item-head strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}
.nacharbeit-item-head span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
.nacharbeit-edit-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 10px;
}
.nacharbeit-note {
  margin-top: 10px;
}
.nacharbeit-note textarea {
  min-height: 72px;
  resize: vertical;
}
.nacharbeit-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ── Materialbestellung ─────────────────────────────────────────────────── */
.material-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.material-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.material-product-grid.split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.material-scope-form {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.material-scope-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.material-scope-title {
  font-weight: 800;
  color: var(--text);
}
.material-scope-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.material-order-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  align-items: end;
  gap: 12px;
}
.material-status-field {
  max-width: 260px;
}
.material-summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.material-summary.active {
  background: #f0fdf4;
  color: #16a34a;
}
.material-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  transition: opacity .15s, background .15s;
}
.material-fields.disabled {
  opacity: .58;
  background: #f8fafc;
}
.material-fields.disabled input,
.material-fields.disabled select {
  cursor: not-allowed;
}
.material-save-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.material-orders-board {
  display: grid;
  gap: 14px;
}
.material-order-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.material-order-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.material-order-group-head span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.material-order-list {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.material-order-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.material-order-card.active { border-color: #fed7aa; background: #fff7ed; }
.material-order-card.done { border-color: #bbf7d0; background: #f0fdf4; }
.material-order-card.cancelled { border-color: var(--border); opacity: .82; }
.material-order-card.legacy {
  background: #fffbeb;
  border-color: #fde68a;
}
.material-order-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.material-order-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.material-order-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.material-order-status {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
}
.material-order-status.active { background: #fff7ed; color: #c2410c; }
.material-order-status.done { background: #f0fdf4; color: #15803d; }
.material-order-status.cancelled { background: #f1f5f9; color: #64748b; }
.material-order-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.material-notes-field {
  display: block;
  margin-top: 10px;
}
.material-notes-field textarea {
  width: 100%;
  resize: vertical;
}
.material-order-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.material-modal-card {
  width: 720px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
}
.deal-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.deal-split-grid.single {
  grid-template-columns: minmax(0, 1fr);
}
.deal-split-box {
  padding: 14px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fff7ed;
}
.deal-split-box.wp {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.deal-split-box label,
.deal-split-box span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
.deal-split-box strong {
  display: block;
  margin: 5px 0;
  font-size: 22px;
  color: var(--text);
}
.deal-split-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 14px;
}
.deal-split-form.single {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}
.deal-split-form input[readonly] {
  background: #eef2f7;
  color: var(--text-muted);
  font-weight: 800;
}
/* ── Finanzen Übersicht (neu) ─────────────────────────────────────── */
.fin-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0 0;
}
@media (max-width: 700px) {
  .fin-overview-grid { grid-template-columns: 1fr; }
}
.fin-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.fin-col-einnahmen .fin-col-title { color: #16a34a; }
.fin-col-ausgaben  .fin-col-title { color: #dc2626; }
.fin-block {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.fin-block-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 2px 0;
  color: var(--text-primary);
}
.fin-row strong { font-weight: 700; }
.fin-row.muted  { color: var(--text-muted); font-size: 12px; }
.fin-row.text-green { color: #16a34a; font-weight: 600; }
.fin-row.text-orange{ color: #ea580c; font-weight: 600; }
.fin-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 2px solid var(--border);
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
}
.fin-rohgewinn {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 10px;
  margin-top: 20px;
  padding: 16px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.fin-rohgewinn.negativ {
  background: #fef2f2;
  border-color: #fecaca;
}
.fin-rg-sep {
  width: 1px;
  height: 48px;
  background: #bbf7d0;
  margin: 0 24px;
}
.fin-rohgewinn.negativ .fin-rg-sep { background: #fecaca; }
.fin-rg-block { flex: 1; }
.fin-rg-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fin-rg-value {
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
}
.fin-rohgewinn.negativ .fin-rg-value { color: #dc2626; }
.fin-rg-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.foerder-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foerder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.foerder-save-row {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .gewerk-grid,
  .gewerk-extra-grid { grid-template-columns: 1fr; }
  .material-order-row,
  .material-fields,
  .foerder-grid {
    grid-template-columns: 1fr;
  }
  .material-status-field {
    max-width: none;
  }
  .nacharbeit-form,
  .nacharbeit-edit-grid {
    grid-template-columns: 1fr;
  }
  .material-save-row .btn,
  .foerder-save-row .btn,
  .gewerk-save-row .btn,
  .nacharbeit-actions .btn,
  .file-action {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* Gewerke-Checkbox-Gruppe (Formular) */
.gewerk-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #f8fafc;
}
.gewerk-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; cursor: pointer; padding: 4px 6px;
  border-radius: 4px; transition: background .15s;
}
.gewerk-check:hover { background: #fff; }
.gewerk-check input { accent-color: #f97316; flex-shrink: 0; width: 14px; height: 14px; margin: 0; }
.gewerk-check span { min-width: 0; word-break: break-word; }

/* Gewerke-Badge (Sub-Karte) */
.gewerk-badge {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
  background: #fff7ed; color: #c2410c; border-radius: 10px;
}
.gewerk-badge-muted { background: #f1f5f9; color: var(--text-muted); }

/* ── Foto-Upload / Gewerk-Fotos ───────────────────────────────────── */
.gewerk-fotos {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.gewerk-fotos-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px; flex-wrap: wrap;
}
.gewerk-fotos-title {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.gewerk-fotos-actions { display: flex; gap: 6px; }
.foto-upload-btn { cursor: pointer; display: inline-flex; align-items: center; }

.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.foto-grid-empty {
  grid-column: 1 / -1;
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  background: #f8fafc;
  border-radius: 6px;
  border: 1px dashed var(--border);
}
.technik-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.technik-chip {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fafc;
}
.technik-chip span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
  font-weight: 700;
}
.technik-chip strong { font-size: 15px; color: var(--text); }
.technik-form .form-actions {
  justify-content: flex-start;
}
.technik-form .btn {
  min-width: 180px;
}
.admin-photo-card .card-subtitle { max-width: 720px; }
.admin-photo-group + .admin-photo-group { margin-top: 20px; }
.admin-photo-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-photo-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.admin-photo-hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-photo-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.admin-photo-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.admin-photo-slot-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.admin-photo-slot-head strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.admin-photo-tech {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-photo-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.foto-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #f1f5f9;
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.foto-thumb:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.foto-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.foto-phase {
  position: absolute;
  left: 6px; top: 6px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  border-radius: 10px;
  background: rgba(15,23,42,0.8);
  color: #fff;
  letter-spacing: 0.04em;
}
.foto-phase.vorher  { background: #0ea5e9; }
.foto-phase.nachher { background: #22c55e; }
.foto-del {
  position: absolute;
  right: 4px; top: 4px;
  width: 22px; height: 22px;
  border: none; border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.foto-thumb:hover .foto-del { opacity: 1; }
.foto-del:hover { background: #dc2626; }

.gewerk-card.uploading {
  position: relative;
  opacity: 0.7;
  pointer-events: none;
}
.gewerk-card.uploading::after {
  content: 'Upload läuft …';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7);
  font-size: 13px; font-weight: 600;
  color: #0f172a;
  border-radius: inherit;
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 2000;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff; font-size: 20px;
  cursor: pointer;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-caption {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  color: #fff;
  font-size: 13px;
  background: rgba(255,255,255,0.08);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: default;
}

/* ── Dokumente & Großhändler-Angebote (Karten-Layout) ─────────────────── */
.document-upload-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.document-upload-form .form-group {
  min-width: 0;
  margin: 0;
}
.document-upload-form .form-group > span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.document-upload-form input,
.document-upload-form select,
.document-upload-form textarea {
  width: 100%;
  min-width: 0;
}
.document-upload-form button[type="submit"] {
  width: 100%;
  justify-content: center;
}
.documents-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.documents-list--mixed {
  display: block;
}
.documents-section {
  min-width: 0;
}
.documents-section + .documents-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.documents-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}
.documents-section-head h3,
.documents-section-head h4 {
  margin: 0;
  color: var(--text, #0f172a);
}
.documents-section-head h3 {
  font-size: 15px;
}
.documents-section-head h4 {
  font-size: 13px;
}
.documents-section-head span {
  flex: 0 0 auto;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
}
.photo-doc-group + .photo-doc-group {
  margin-top: 14px;
}
.photo-doc-list,
.regular-doc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.photo-doc-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "preview content"
    "actions actions";
  gap: 10px 12px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.photo-doc-card--pv {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 56%);
}
.photo-doc-card--wp {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 56%);
}
.photo-doc-preview {
  grid-area: preview;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 12px;
  font-size: 25px;
}
.photo-doc-content {
  grid-area: content;
  min-width: 0;
}
.photo-doc-title {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--text, #0f172a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.photo-doc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.photo-doc-badge {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-doc-badge--category {
  background: #e2e8f0;
  color: #334155;
}
.photo-doc-meta {
  margin-top: 7px;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.photo-doc-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.photo-doc-actions .btn {
  justify-content: center;
  min-height: 36px;
}
.photo-doc-delete {
  color: #b91c1c;
  background: #fff1f2;
  border-color: #ffe4e6;
}
.photo-doc-delete:hover {
  background: #fee2e2;
  border-color: #fecaca;
}
.angebot-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  min-width: 0;
}
.angebot-card:hover {
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
  border-color: #cbd5e1;
}
.angebot-card--offer {
  border-color: #bae6fd;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 70%);
}
.angebot-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  font-size: 22px;
}
.angebot-card--offer .angebot-icon {
  background: #e0f2fe;
}
.angebot-body { min-width: 0; }
.angebot-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.angebot-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.angebot-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.angebot-badges .badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}
.angebot-badges .badge-grosshaendler_angebot { background: #dbeafe; color: #1d4ed8; }
.angebot-badges .badge-rechnung { background: #dcfce7; color: #166534; }
.angebot-badges .badge-auftragsbestaetigung { background: #fef3c7; color: #92400e; }
.angebot-badges .badge-beratungsprotokoll { background: #f3e8ff; color: #6b21a8; }
.angebot-badges .badge-hydraulik_schema { background: #cffafe; color: #155e75; }
.angebot-badges .badge-heizlastberechnung { background: #fef3c7; color: #92400e; }
.angebot-badges .badge-elektro_schema { background: #fee2e2; color: #991b1b; }
.angebot-badges .badge-gewerk { background: #e2e8f0; color: #334155; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }

.angebot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.angebot-meta-item { white-space: nowrap; }
.angebot-meta-item.angebot-summe {
  color: #047857;
  font-weight: 600;
}
.angebot-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.angebot-delete {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 9px;
  font-size: 14px;
  cursor: pointer;
}
.angebot-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
@media (max-width: 480px) {
  .documents-list {
    grid-template-columns: 1fr;
  }
  .photo-doc-list,
  .regular-doc-list {
    grid-template-columns: 1fr;
  }
  .photo-doc-card {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 11px;
  }
  .photo-doc-preview {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    font-size: 22px;
  }
  .photo-doc-actions {
    grid-template-columns: 1fr;
  }
  .angebot-card {
    grid-template-columns: 40px 1fr;
    align-items: start;
  }
  .angebot-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .angebot-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Auftrag & Teilrechnungen ────────────────────────────────────────── */
.auftrag-block { padding: 4px 0 12px; }
.auftrag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.auftrag-grid > * { min-width: 0; }
.auftrag-grid .auftrag-file-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auftrag-grid .auftrag-file-field span {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 600;
}
.auftrag-grid .auftrag-file-field .file-action {
  align-self: flex-start;
}
.auftrag-grid .auftrag-save {
  grid-column: 1 / -1;
  justify-self: flex-end;
}

.teilrechnungen-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.teilrechnungen-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.teilrechnungen-title { font-size: 14px; font-weight: 600; color: var(--text, #0f172a); }
.teilrechnungen-summary {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

#teilrechnungen-list {
  display: flex; flex-direction: column; gap: 10px;
}
.rechnung-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.rechnung-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.rechnung-card.rechnung-bezahlt { border-color: #bbf7d0; background: #f0fdf4; }
.rechnung-card.rechnung-teilweise { border-color: #fed7aa; background: #fffbeb; }
.rechnung-card.rechnung-offen { border-color: var(--border); }

.rechnung-num {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9;
  border-radius: 10px;
  font-weight: 700;
  color: #475569;
}
.rechnung-card.rechnung-bezahlt .rechnung-num { background: #dcfce7; color: #166534; }
.rechnung-card.rechnung-teilweise .rechnung-num { background: #fef3c7; color: #92400e; }

.rechnung-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rechnung-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}
.rechnung-source-row .badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.badge-sevdesk { background: #e0f2fe; color: #075985; }
.badge-manuell { background: #f1f5f9; color: #475569; }
.rechnung-ref { font-size: 12px; color: #64748b; font-weight: 700; }
.rechnung-bezeichnung {
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  width: 100%;
  color: var(--text, #0f172a);
}
.rechnung-bezeichnung:hover, .rechnung-bezeichnung:focus {
  border-color: var(--border, #e2e8f0);
  background: #fff;
  outline: none;
}
.rechnung-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .rechnung-row { grid-template-columns: 1fr 1fr; }
}
.rechnung-field {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rechnung-field span {
  font-size: 11px; color: var(--text-muted, #64748b); font-weight: 600;
}
.rechnung-field input, .rechnung-field select {
  padding: 6px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  width: 100%;
}
.rechnung-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 4px;
}
.rechnung-actions .file-action input { display: none; }
.rechnung-delete:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ── Öffentlicher Subunternehmer-Link ─────────────────────────────────── */
/* v3.02 — Sub-Account-Dashboard (professionelles Layout) */
.sub-dashboard-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  width: 100%;
}
.sub-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.sub-dashboard-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sub-dashboard-logo { width: 56px; height: auto; flex-shrink: 0; }
.sub-dashboard-firma { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.sub-dashboard-subtitle { margin-top: 3px; font-size: 12px; color: #64748b; }
.sub-dashboard-actions { display: flex; gap: 8px; flex-shrink: 0; }

.sub-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sub-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sub-stat-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.sub-stat-value { font-size: 24px; font-weight: 900; color: #0f172a; line-height: 1; }
.sub-stat-label { margin-top: 4px; font-size: 12px; color: #64748b; font-weight: 600; }

.sub-section { margin-bottom: 28px; }
.sub-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.sub-section-head h2 {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.sub-section-count {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.sub-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.sub-card-pro.is-highlighted {
  box-shadow: 0 0 0 3px #f97316, 0 8px 20px rgba(249,115,22,.25);
  transition: box-shadow .3s ease;
}
.sub-card-pro {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
}
.sub-card-pro:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.sub-card-pro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.sub-card-pro-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.3; min-width: 0; }
.sub-card-pro-title strong { display: block; word-break: break-word; }
.sub-card-pro-status {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sub-card-pro-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}
.sub-card-pro-meta > div { display: flex; gap: 6px; }
.sub-card-pro-icon { flex-shrink: 0; }
.sub-card-pro-action { display: flex; justify-content: flex-end; margin-top: 4px; }

.sub-portal-empty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
}

@media (max-width: 640px) {
  .sub-dashboard-header { flex-direction: column; align-items: flex-start; }
  .sub-dashboard-actions { width: 100%; }
  .sub-dashboard-actions .btn { flex: 1; }
  .sub-cards-grid { grid-template-columns: 1fr; }
  .sub-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* v3.00 — Defensiv-Hides für rolle=sub, falls JS-Restriktionen verzögert greifen */
body.role-sub .sidebar-nav .nav-item[data-route="sales"],
body.role-sub .sidebar-nav .nav-item[data-route="neu"],
body.role-sub .sidebar-nav .nav-item[data-route="archiv"],
body.role-sub .sidebar-nav .nav-item[data-route="subunternehmer"],
body.role-sub .sidebar-nav .nav-item[data-route="vertriebler"],
body.role-sub .sidebar-nav .nav-item[data-route="aufgaben"],
body.role-sub .mobile-tabbar .mobile-nav-item[data-route="sales"],
body.role-sub .mobile-tabbar .mobile-nav-item[data-route="neu"],
body.role-sub #topbar-new-projekt { display: none !important; }

body.public-portal #app {
  display: flex !important;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
body.public-portal .sidebar,
body.public-portal .topbar,
body.public-portal .mobile-tabbar {
  display: none !important;
}
body.public-portal .main {
  width: 100%;
  min-height: 100dvh;
  overflow: visible;
}
body.public-portal .content {
  padding: calc(24px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  overflow: visible;
}
/* v3.07: flex-center NUR für Token-Login-Portal (sub-portal-wrap / vp-wrap),
   NICHT für Sub-Dashboard und NICHT als Fallback fürs CRM-Dashboard,
   sonst kollabiert .content zu flex-row und das gesamte Dashboard bricht. */
body.public-portal .content:has(.sub-portal-wrap):not(:has(.sub-dashboard-wrap)),
body.public-portal .content:has(.vp-wrap) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* v3.02: Sub-Dashboard nutzt volle Breite, nicht center-aligned wie Token-Portal */
body.public-portal .content:has(.sub-dashboard-wrap) {
  display: block;
  padding: 0;
}
/* ── Sub-Portal (Subunternehmer + Vertriebler) ─────────────────────────────── */
.sub-portal-wrap {
  width: min(720px, 100%);
}
.sub-portal-wrap.portal-wide {
  width: min(920px, 100%);
}
.sub-portal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 24px;
}
.sub-portal-brand {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: .3px;
}
.sub-portal-card h1 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 18px;
  color: var(--text);
}

/* Summary Cards */
.sub-portal-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.sub-portal-summary div {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.sub-portal-summary span {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.sub-portal-summary strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.sub-work-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.sub-work-action {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  min-height: 46px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.sub-work-action.primary {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}
.sub-work-section {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.sub-work-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.sub-work-section-head h2 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}
.sub-work-kicker {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sub-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
  margin-bottom: 14px;
}
.sub-progress-track div {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.sub-checklist-items {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.sub-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.sub-checklist-item input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #f97316;
}
.sub-checklist-item strong {
  display: block;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.35;
}
.sub-checklist-item small {
  display: inline-block;
  margin-top: 4px;
  color: #b45309;
  font-size: 11px;
  font-weight: 800;
}
.sub-feedback-box {
  margin-top: 18px;
}
.sub-confirm-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}
.sub-confirm-row input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  accent-color: #f97316;
}

/* Confirm Box */
.portal-confirm-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0;
  padding: 16px;
  border: 2px solid #fed7aa;
  border-radius: 12px;
  background: #fff7ed;
}
.portal-confirm-box.confirmed {
  border-color: #86efac;
  background: #f0fdf4;
}
.portal-confirm-box strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.portal-confirm-box span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.portal-confirm-box .btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
}

/* Portal Actions (Kalender etc.) */
.portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}
.portal-actions .btn {
  min-height: 44px;
}

/* Downloads */
.portal-downloads { margin: 14px 0 18px; }
.portal-download-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--accent);
  font-weight: 700;
  min-height: 44px;
}

/* Section Title */
.portal-section-title {
  margin: 20px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Foto-Upload Box */
.sub-photo-box {
  margin: 18px 0;
  padding: 18px;
  border: 1.5px dashed #94a3b8;
  border-radius: 12px;
  background: #f8fafc;
}
.sub-photo-box p, .sub-invoice-box p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 6px 0 14px;
  line-height: 1.5;
}
.sub-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sub-photo-actions .btn {
  justify-content: center;
  min-height: 48px;
  font-size: 14px;
}

/* Rechnung Box */
.sub-invoice-box {
  margin-top: 18px;
  padding: 18px;
  border: 1.5px dashed #f97316;
  border-radius: 12px;
  background: #fff7ed;
}
.sub-invoice-box .btn {
  min-height: 48px;
  width: 100%;
  justify-content: center;
}

/* Status Form */
.sub-portal-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 4px;
}
.sub-portal-form select {
  min-height: 44px;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sub-portal-form .btn {
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* Vertriebler Photo List */
.vertrieb-photo-list, .portal-gewerke-list { display: grid; gap: 10px; }
.vertrieb-photo-item, .portal-gewerk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  min-height: 56px;
}
.vertrieb-photo-item.done { border-color: #86efac; background: #f0fdf4; }
.vertrieb-photo-item strong, .portal-gewerk-row strong { display: block; font-size: 14px; font-weight: 600; }
.vertrieb-photo-item span, .portal-gewerk-row span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; }

/* Status Badge */
.portal-status {
  min-width: 112px;
  padding: 7px 12px;
  border-radius: 999px;
  text-align: center;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.portal-status.in_arbeit, .portal-status.terminiert { background: #ffedd5; color: #c2410c; }
.portal-status.abgeschlossen { background: #dcfce7; color: #15803d; }

/* ── Mobile Optimierungen (≤ 620px) ────────────────────────────────────────── */
@media (max-width: 620px) {
  .sub-portal-card {
    padding: 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
  .sub-portal-wrap {
    padding: 0;
  }
  .sub-portal-card h1 {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .sub-portal-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sub-portal-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
  }
  .sub-portal-summary span {
    margin-bottom: 0;
    font-size: 12px;
  }
  .sub-portal-summary strong {
    font-size: 14px;
    text-align: right;
    max-width: 60%;
  }
  .portal-confirm-box {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .portal-confirm-box .btn {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    min-height: 52px;
  }
  .sub-photo-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sub-photo-actions .btn {
    min-height: 52px;
    font-size: 15px;
  }
  .sub-portal-form {
    grid-template-columns: 1fr;
  }
  .sub-portal-form .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 16px;
  }
  .sub-portal-form select {
    font-size: 16px; /* verhindert iOS Zoom */
    min-height: 48px;
  }
  .portal-actions {
    flex-direction: column;
  }
  .portal-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .vertrieb-photo-item, .portal-gewerk-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vertrieb-photo-item .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .portal-status {
    min-width: 0;
    width: 100%;
    text-align: center;
    padding: 8px;
  }
  .portal-download-link {
    min-height: 52px;
    font-size: 15px;
  }
}

/* ── Dashboard-Kalender ─────────────────────────────────────────────────────── */
.calendar-card { overflow: hidden; }
.dashboard-calendar-card {
  margin-bottom: 18px;
  padding: 0;
}
.dashboard-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.dashboard-calendar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.calendar-filter-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.calendar-filter-control span {
  color: var(--text-muted);
  white-space: nowrap;
}
.calendar-filter-control select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  max-width: 150px;
  cursor: pointer;
}
.dashboard-calendar-icon-btn {
  min-width: 34px;
  padding-inline: 0 !important;
}
.dashboard-calendar-date {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.dashboard-calendar-scroll {
  max-height: 760px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f8fafc;
}
.dashboard-calendar-week {
  padding: 14px 16px 16px;
  border-bottom: 1px solid #dbe3ef;
}
.dashboard-calendar-week:last-child { border-bottom: 0; }
.dashboard-calendar-week-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}
.dashboard-calendar-month {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}
.dashboard-calendar-range {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
.dashboard-calendar-week-count {
  background: #e2e8f0;
  color: #475569;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  white-space: nowrap;
}
.calendar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.calendar-grid-three-weeks {
  gap: 14px;
}

.week-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  overflow-x: auto;
}

.week-day {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.week-day.weekend {
  background: #f1f5f9;
  border-style: dashed;
}
.week-day.holiday {
  background: #fff1f2;
  border-color: #fecdd3;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.08);
}

.week-day-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 8px;
  background: transparent;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
}
.week-day.today .week-day-header {
  background: transparent;
  border-bottom-color: var(--accent);
}
.week-day.today {
  background: #fff7ed;
  border-color: #fdba74;
  box-shadow: inset 0 0 0 1px rgba(249,115,22,.18);
}
.week-day.today.holiday {
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
  border-color: #fb7185;
}
.week-day.is-drop-target {
  border-color: var(--accent);
  background: #fff7ed;
  box-shadow: inset 0 0 0 2px rgba(249, 115, 22, 0.22);
}
.week-day.past .week-day-header {
  background: transparent;
  opacity: 0.7;
}
.week-day-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
}
.week-day.today .week-day-name { color: var(--accent); }
.week-day-date {
  font-size: 18px;
  color: var(--text);
  font-weight: 900;
  flex: 1;
}
.week-day.weekend .week-day-name,
.week-day.weekend .week-day-date { color: #94a3b8; }
.week-day-count {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.week-day-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  flex: 1;
  min-height: 98px;
}
.week-day-empty {
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding: 18px 6px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: rgba(255,255,255,.62);
}
.week-holiday {
  padding: 7px 9px;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
}

.week-event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: grab;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  width: 100%;
  background: #fff;
  box-shadow: var(--shadow);
}
.week-event:active { cursor: grabbing; }
.week-event.is-dragging {
  opacity: 0.58;
  transform: scale(0.98);
}
.week-event:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Status/Typ über volle, getönte Border + BG-Tönung statt Seitenstreifen
   (DESIGN.md: keine farbigen Seitenstreifen > 1px). */
.week-event-offen      { border-color: var(--border); }
.week-event-terminiert { border-color: #bfdbfe; background: #eff6ff; }
.week-event-in_arbeit  { border-color: #fed7aa; background: #fff7ed; }
.week-event-abgeschlossen { border-color: #bbf7d0; background: #f0fdf4; }
.week-event-pv {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
}
.week-event-wp {
  border-color: #bae6fd;
  background: linear-gradient(180deg, #eff6ff 0%, #fff 100%);
}
.week-event-pv .week-event-typ { color: #c2410c; }
.week-event-wp .week-event-typ { color: #0369a1; }

.week-event-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.week-event-typ   { font-size: 12px; }
.week-event-name  { font-size: 12px; font-weight: 850; color: var(--text); line-height: 1.25; }
.week-event-gewerk{ font-size: 11px; color: var(--text-muted); font-weight: 700; }
.week-event-notiz { display:block; font-size: 11px; color: #475569; font-weight: 500; line-height: 1.3; margin-top: 2px; white-space: normal; overflow-wrap: anywhere; }
.week-event-date { font-size: 10px; color: #64748b; }

.vp-photo-group {
  margin-bottom: 14px;
}
.vp-photo-group-head {
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
  padding: 12px 14px;
}
.vp-photo-group-pv .vp-photo-group-head {
  background: #fff7ed;
  border-color: #fed7aa;
}
.vp-photo-group-wp .vp-photo-group-head {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.vp-photo-group-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}
.vp-photo-group-head span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .project-matrix-toolbar { flex-direction: column; }
  .project-matrix-filters { justify-content: flex-start; width: 100%; }
  .matrix-search { min-width: min(100%, 240px); }
  .project-matrix-table { min-width: 1120px; }
  .dashboard-calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .dashboard-calendar-actions { justify-content: flex-start; }
  .week-calendar { grid-template-columns: repeat(7, minmax(145px, 1fr)); }
}
@media (max-width: 600px) {
  .dashboard-calendar-week { padding: 12px 10px 14px; }
  .dashboard-calendar-scroll { max-height: 700px; }
  .dashboard-calendar-actions .btn { min-height: 34px; padding: 7px 10px; }
  .dashboard-calendar-date { width: 100%; }
  .week-calendar { grid-template-columns: repeat(7, minmax(150px, 1fr)); }
  .week-event-name { font-size: 12px; }
}

/* ── Vertriebler-Portal (vp-*) ──────────────────────────────────── */
.vp-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 48px;
  font-family: 'Hanken Grotesk', sans-serif;
}

/* Header */
.vp-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #f97316 100%);
  border-radius: 0 0 20px 20px;
  padding: 32px 20px 28px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}
.vp-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 10px;
}
.vp-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff;
}
.vp-subtitle {
  font-size: 14px;
  opacity: .85;
  line-height: 1.4;
}

/* Info chips */
.vp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.vp-chip {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vp-chip-muted {
  background: #f1f5f9;
  color: #64748b;
  font-weight: 500;
}

/* Card base */
.vp-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  margin: 0 16px 14px;
  padding: 16px;
}

/* Progress card */
.vp-progress-card { padding: 16px 16px 14px; }
.vp-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.vp-progress-label { font-size: 13px; font-weight: 600; color: #1e293b; }
.vp-progress-count {
  font-size: 12px;
  font-weight: 700;
  color: #f97316;
  background: #fff7ed;
  border-radius: 10px;
  padding: 2px 9px;
}
.vp-progress-bar-wrap {
  height: 8px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}
.vp-progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f97316, #fb923c);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
}

/* Section title */
.vp-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0 16px;
  margin: 20px 0 10px;
}
.vp-doc-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 12px;
}
.vp-doc-note span {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.vp-doc-note textarea {
  width: 100%;
  border: 1.5px solid #dbe3ef;
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  color: #1e293b;
  background: #fff;
  outline: none;
}
.vp-doc-note textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.vp-baustart-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vp-current-value {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.vp-current-value span,
.vp-field span {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
.vp-current-value strong {
  font-size: 14px;
  color: #1e293b;
  text-align: right;
}
.vp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vp-field input,
.vp-field select,
.vp-field textarea {
  width: 100%;
  border: 1.5px solid #dbe3ef;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  outline: none;
}
.vp-field textarea {
  resize: vertical;
}
.vp-field input:focus,
.vp-field select:focus,
.vp-field textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.vp-baustart-kw {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vp-primary-btn {
  border: 0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f97316;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.vp-primary-btn:disabled {
  opacity: .7;
  cursor: wait;
}

/* Photo list */
.vp-photo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.vp-photo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: border-color .2s;
}
.vp-photo-item.done {
  border-color: #86efac;
  background: #f0fdf4;
}
.vp-photo-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f97316;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vp-photo-item.done .vp-photo-num {
  background: #22c55e;
}
.vp-photo-info {
  flex: 1;
  min-width: 0;
}
.vp-photo-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vp-photo-info span {
  font-size: 11px;
  color: #64748b;
}
.vp-photo-item.done .vp-photo-info span { color: #16a34a; }

.vp-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #f97316;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  transition: background .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.vp-upload-btn:hover { background: #ea6a0a; }
.vp-upload-btn input[type="file"] { display: none; }

.vp-upload-btn-done {
  background: #e2f5ea;
  color: #16a34a;
}
.vp-upload-btn-done:hover { background: #d1fae5; }

/* Gewerke list */
.vp-gewerke-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
.vp-gewerk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.vp-gewerk-info { flex: 1; min-width: 0; }
.vp-gewerk-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.vp-gewerk-info span {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

.vp-status {
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.vp-status-offen        { background: #f1f5f9; color: #64748b; }
.vp-status-terminiert   { background: #eff6ff; color: #2563eb; }
.vp-status-in_arbeit    { background: #fff7ed; color: #ea580c; }
.vp-status-abgeschlossen{ background: #f0fdf4; color: #16a34a; }

.project-task-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(135px, .8fr) minmax(120px, .7fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
}
.project-task-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.project-task-form label > span {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.project-task-form input,
.project-task-form select {
  min-width: 0;
  width: 100%;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.project-task-form button {
  height: 40px;
  white-space: nowrap;
}
.project-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.project-task-title {
  color: var(--text-main);
  font-weight: 700;
  font-size: 13px;
}
.project-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}
.project-task-row.is-done .project-task-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.gewerk-checklist-meta {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  background: #f0fdf4;
}
.gewerk-checklist-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #14532d;
  font-size: 12px;
  font-weight: 800;
}
.gewerk-checklist-track {
  height: 7px;
  margin: 8px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #dcfce7;
}
.gewerk-checklist-track div {
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}
.gewerk-checklist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gewerk-checklist-tags span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
}
.gewerk-checklist-meta p {
  margin: 8px 0 0;
  color: #14532d;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 820px) {
  .material-product-grid.split,
  .deal-split-grid,
  .deal-split-form,
  .material-fields,
  .material-order-fields,
  .material-order-row {
    grid-template-columns: 1fr;
  }
  .material-order-card-head,
  .material-order-group-head {
    flex-direction: column;
  }
  .material-scope-head {
    flex-direction: column;
  }
  .material-save-row,
  .material-order-actions .btn,
  .deal-split-form button {
    width: 100%;
  }
  .material-save-row .btn {
    flex: 1 1 100%;
  }
  .project-task-form {
    grid-template-columns: 1fr;
  }
  .project-task-form input,
  .project-task-form select,
  .project-task-form button {
    width: 100%;
  }
  body.public-portal .content {
    padding: max(12px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom));
  }
  .sub-portal-card {
    padding: 16px;
    border-radius: 10px;
  }
  .sub-portal-summary,
  .sub-work-actions {
    grid-template-columns: 1fr;
  }
  .portal-confirm-box {
    align-items: stretch;
    flex-direction: column;
  }
  .portal-confirm-box .btn,
  .sub-work-action {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .vp-header { border-radius: 14px; margin: 16px; }
  .vp-wrap { padding: 16px 0 48px; }
}

/* ── Förder-Kanban (Sub-Portal) ──────────────────────────────────────────── */
.foerder-view-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.foerder-view-btn { padding: 8px 14px; border: 0; background: #fff; color: #475569; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s; }
.foerder-view-btn:hover { background: #f1f5f9; }
.foerder-view-btn + .foerder-view-btn { border-left: 1px solid #cbd5e1; }
.foerder-view-btn.is-active { background: #f97316; color: #fff; }

.sub-portal-account-views[data-foerder-view="kanban"] .view-cards,
.sub-portal-account-views[data-foerder-view="kanban"] .view-table { display: none; }
.sub-portal-account-views[data-foerder-view="cards"] .view-kanban,
.sub-portal-account-views[data-foerder-view="cards"] .view-table { display: none; }
.sub-portal-account-views[data-foerder-view="table"] .view-kanban,
.sub-portal-account-views[data-foerder-view="table"] .view-cards { display: none; }
/* v3.30: Förder-Tabellen-Ansicht */
.view-table { overflow-x: auto; }
.foerder-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; font-size: 14px; }
.foerder-table thead th { text-align: left; background: #f8fafc; color: #475569; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 11px 14px; border-bottom: 1px solid #e2e8f0; }
.foerder-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #0f172a; }
.foerder-table tbody tr:last-child td { border-bottom: none; }
.foerder-table .ft-row { cursor: pointer; transition: background .12s; }
.foerder-table .ft-row:hover { background: #f8fafc; }
.foerder-table .ft-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.foerder-table .ft-badge { background: #fee2e2; color: #b91c1c; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.foerder-table .ft-empty { text-align: center; color: #94a3b8; padding: 20px; }
@media (max-width: 720px){ .foerder-table .ft-hide-sm { display: none; } }

.foerder-progress-bar { position: relative; height: 36px; background: #f1f5f9; border-radius: 10px; margin: 12px 0 18px; overflow: hidden; border: 1px solid #e2e8f0; }
.foerder-progress-fill { position: absolute; left:0; top:0; bottom:0; width:100%; background: linear-gradient(90deg, #f97316, #ea580c); transform: scaleX(0); transform-origin: left center; transition: transform .3s; }
.foerder-progress-label { position: relative; z-index: 1; line-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; color: #0f172a; mix-blend-mode: difference; color: #fff; }

/* v3.24: 9-Spalten-Pipeline, robustes horizontales Flex-Scrolling (löst Grid-1fr-Abschneiden) */
.foerder-board { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; overflow-y: visible; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.foerder-col { flex: 0 0 230px; background: var(--col-tint, #f8fafc); border-radius: 12px; padding: 10px; min-height: 200px; scroll-snap-align: start; transition: background .15s, box-shadow .15s; }
.foerder-col.is-drop-target { background: #fff; box-shadow: 0 0 0 2px #f97316 inset; }
.foerder-col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: 8px; }
.foerder-col-icon { font-size: 16px; }
.foerder-col-title { flex: 1; font-size: 13px; font-weight: 800; color: #0f172a; letter-spacing: .2px; }
.foerder-col-count { background: rgba(0,0,0,.08); color: #0f172a; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.foerder-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.foerder-col-empty { color: #94a3b8; font-size: 12px; text-align: center; padding: 8px; font-style: italic; }

.foerder-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.foerder-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.foerder-card.is-dragging { opacity: .5; cursor: grabbing; }
.foerder-card.is-warning { border-color: #f97316; box-shadow: 0 0 0 1px #fed7aa; }
.foerder-card.is-escalated { border-color: #dc2626; box-shadow: 0 0 0 1px #fecaca; background: #fff5f5; }
.foerder-card-title { font-weight: 700; font-size: 14px; color: #0f172a; margin-bottom: 4px; }
.foerder-card-meta { font-size: 12px; color: #475569; line-height: 1.4; }
.foerder-card-age { font-size: 11px; color: #94a3b8; margin-top: 4px; font-weight: 600; }

/* v3.21 Karteninhalt + Ampel-Punkt + Badges */
.foerder-card-head-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.foerder-ampel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.foerder-card-next { font-size: 12px; color: #0f172a; margin-top: 4px; font-weight: 600; }
.foerder-card-badge { margin-left: auto; background: #fee2e2; color: #991b1b; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.foerder-card-badge-rf { background: #fef3c7; color: #92400e; }
.foerder-card.foerder-ampel-rot { border-color: #dc2626; }
.foerder-card.foerder-ampel-schwarz { border-color: #0f172a; background: #f8fafc; }
.foerder-card.foerder-ampel-gelb { border-color: #eab308; }
.foerder-card.foerder-ampel-gruen { border-color: #86efac; }

/* v3.21 Dashboard Förder-KPI-Strip */
.foerder-kpi-row { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; margin: 12px 0 18px; }
.foerder-kpi-row-head { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.foerder-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.foerder-kpi-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: background .15s, border-color .15s; text-align: left; }
.foerder-kpi-card:hover { background: #f1f5f9; border-color: #cbd5e1; }
.foerder-kpi-value { font-size: 22px; font-weight: 800; color: #0f172a; }
.foerder-kpi-label { font-size: 11px; color: #475569; font-weight: 600; }
.foerder-kpi-card.foerder-kpi-warn { background: #fff7ed; border-color: #fed7aa; }
.foerder-kpi-card.foerder-kpi-warn .foerder-kpi-value { color: #b45309; }
.foerder-kpi-card.foerder-kpi-critical { background: #fef2f2; border-color: #fecaca; }
.foerder-kpi-card.foerder-kpi-critical .foerder-kpi-value { color: #b91c1c; }
.foerder-kpi-collapsed { margin-top: 10px; }
.foerder-kpi-collapsed summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  list-style: none;
}
.foerder-kpi-collapsed summary::-webkit-details-marker { display: none; }
.foerder-kpi-collapsed summary::before { content: "▸ "; }
.foerder-kpi-collapsed[open] summary::before { content: "▾ "; }
.foerder-kpi-collapsed .foerder-kpi-grid { margin-top: 10px; }

/* v3.21 Förderakte (Detail-Tabs) */
.foerder-akte { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.foerder-akte-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #f1f5f9; border-left: 4px solid #cbd5e1; }
.foerder-akte-banner.foerder-akte-ampel-gruen { border-left-color: #22c55e; background: #f0fdf4; }
.foerder-akte-banner.foerder-akte-ampel-gelb { border-left-color: #eab308; background: #fefce8; }
.foerder-akte-banner.foerder-akte-ampel-rot { border-left-color: #dc2626; background: #fef2f2; }
.foerder-akte-banner.foerder-akte-ampel-schwarz { border-left-color: #0f172a; background: #f1f5f9; }
.foerder-akte-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #e2e8f0; }
.foerder-akte-tab { background: transparent; border: 0; padding: 8px 12px; cursor: pointer; font-size: 13px; color: #475569; border-bottom: 2px solid transparent; white-space: nowrap; }
.foerder-akte-tab.is-active { color: #0f172a; border-bottom-color: #f97316; font-weight: 700; }
.foerder-akte-pane { padding: 12px 0; }
.foerder-akte-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.foerder-akte-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; }
.foerder-akte-card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.foerder-akte-status-big { font-size: 16px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.foerder-akte-meta { font-size: 13px; color: #475569; line-height: 1.6; }
.foerder-akte-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.foerder-akte-empty { color: #94a3b8; font-style: italic; padding: 12px; text-align: center; }
.foerder-akte-sonder { margin-top: 10px; padding: 10px; background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 6px; font-size: 13px; color: #991b1b; }

/* v3.21 Pflichtpunkt-Matrix */
.foerder-pflicht-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.foerder-pflicht-table th, .foerder-pflicht-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.foerder-pflicht-table th { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 700; }
.foerder-pflicht-status { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.foerder-pflicht-status.pflicht-fehlt { background: #fee2e2; color: #991b1b; }
.foerder-pflicht-status.pflicht-angefordert { background: #fef3c7; color: #92400e; }
.foerder-pflicht-status.pflicht-hochgeladen { background: #dbeafe; color: #1e40af; }
.foerder-pflicht-status.pflicht-geprueft { background: #dcfce7; color: #166534; }
.foerder-pflicht-status.pflicht-abgelehnt { background: #fecaca; color: #7f1d1d; }

/* v3.21 Threads (Kommunikation) */
.foerder-thread-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foerder-thread { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; }
.foerder-thread.is-open { border-left: 3px solid #f97316; }
.foerder-thread.is-closed { opacity: 0.7; }
.foerder-thread-head { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #64748b; margin-bottom: 6px; }
.foerder-thread-type { font-weight: 700; text-transform: uppercase; }
.foerder-thread-prio.prio-wichtig { color: #b45309; }
.foerder-thread-prio.prio-dringend { color: #b91c1c; font-weight: 700; }
.foerder-thread-body { font-size: 13px; color: #0f172a; line-height: 1.5; margin-bottom: 6px; }
.foerder-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.foerder-history-table th, .foerder-history-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.foerder-history-table th { font-size: 11px; color: #64748b; text-transform: uppercase; }

/* v3.21 Modals */
.modal-overlay.foerder-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.modal.foerder-modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal.foerder-modal .modal-head { padding: 14px 18px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; }
.modal.foerder-modal .modal-head h3 { margin: 0; font-size: 15px; }
.modal.foerder-modal .modal-close { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #64748b; }
.modal.foerder-modal .modal-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.modal.foerder-modal .modal-body label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #0f172a; font-weight: 600; }
.modal.foerder-modal .modal-body input, .modal.foerder-modal .modal-body select, .modal.foerder-modal .modal-body textarea { font-size: 13px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; }
.modal.foerder-modal .modal-foot { padding: 12px 18px; border-top: 1px solid #e2e8f0; display: flex; gap: 8px; justify-content: flex-end; }
.foerder-modal-warning { background: #fef2f2; border-left: 3px solid #dc2626; padding: 10px; border-radius: 6px; font-size: 12px; color: #991b1b; }

/* v3.21 Notifications-Glocke */
.notif-bell-root { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.notif-bell-btn { background: transparent; border: 0; padding: 6px 10px; cursor: pointer; font-size: 18px; position: relative; }
.notif-bell-btn:hover { background: rgba(0,0,0,.04); border-radius: 8px; }
.notif-bell-badge { position: absolute; top: 0; right: 0; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px; min-width: 16px; text-align: center; }
.notif-dropdown { position: absolute; top: 110%; right: 0; width: 320px; max-height: 420px; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.12); z-index: 9000; }
.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.notif-mark-all { background: transparent; border: 0; color: #f97316; cursor: pointer; font-size: 12px; font-weight: 600; }
.notif-list { padding: 4px 0; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f8fafc; text-decoration: none; color: inherit; transition: background .12s; }
.notif-item:hover { background: #f8fafc; }
.notif-item.is-read { opacity: 0.55; }
.notif-icon { font-size: 18px; flex: 0 0 auto; }
.notif-body { flex: 1; min-width: 0; }
.notif-subject { display: block; font-size: 13px; color: #0f172a; font-weight: 600; line-height: 1.4; }
.notif-meta { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.notif-empty { padding: 18px; text-align: center; color: #94a3b8; font-size: 13px; font-style: italic; }

@media (max-width: 900px) {
  .foerder-board { scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .foerder-col { flex: 0 0 85vw; scroll-snap-align: start; }
  .foerder-card { cursor: pointer; } /* DnD-Touch unzuverlässig — Klick öffnet Stage-Menü */
}

/* ── Reduced Motion ─────────────────────────────────────────────────────────
   Vestibulär empfindliche Nutzer: dekorative Bewegung (Hover-Lifts, Scale,
   Modal-Slides) auf praktisch null. Der funktionale Lade-Spinner bleibt aktiv,
   sonst verliert er seine Bedeutung als Lade-Indikator. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation: spin .7s linear infinite !important; }
}

/* ═════════ Ausgaben-Modul (Admin) ═════════ */
.ausgaben-card .card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ausgaben-summary { margin: 8px 0 16px; }
.ausgaben-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.ausgaben-tab {
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  padding: 6px 12px; border-radius: 6px 6px 0 0; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ausgaben-tab:hover { background: var(--bg-muted, #f1f5f9); color: var(--text); }
.ausgaben-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ausgaben-list { display: flex; flex-direction: column; gap: 8px; }
.ausgabe-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr 1.2fr 0.6fr 1.2fr;
  gap: 12px; padding: 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; align-items: center;
}
.ausgabe-row.is-open  { border-color: #fed7aa; background: #fff7ed; }
.ausgabe-row.is-paid  { border-color: #bbf7d0; background: #f0fdf4; }
.ausgabe-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ausgabe-kat { display:inline-block; padding:2px 8px; border-radius:10px; font-weight:700; font-size:11px; width:fit-content; }
.ausgabe-date { color: var(--text-muted); }
.ausgabe-status { font-size: 11px; font-weight: 600; }
.ausgabe-lieferant { font-weight: 700; font-size: 14px; }
.ausgabe-rnr { font-size: 12px; color: var(--text-muted); font-family: ui-monospace, monospace; }
.ausgabe-amount { text-align: right; }
.ausgabe-faellig { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.ausgabe-beleg { font-size: 12px; }
.ausgabe-aktionen { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 5px; }

@media (max-width: 900px) {
  .ausgabe-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "meta amount" "main main" "faellig beleg" "aktionen aktionen";
  }
  .ausgabe-meta { grid-area: meta; }
  .ausgabe-amount { grid-area: amount; }
  .ausgabe-main { grid-area: main; }
  .ausgabe-faellig { grid-area: faellig; }
  .ausgabe-beleg { grid-area: beleg; }
  .ausgabe-aktionen { grid-area: aktionen; justify-content: flex-start; }
}

/* OCR-Upload-Block (generisch — Ausgaben + Material-AB) */
.ausgabe-upload-row,
.ocr-upload-row {
  background: linear-gradient(135deg, #f0f9ff 0%, #fef3c7 100%);
  border: 1.5px dashed #0ea5e9;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ausgabe-upload-head,
.ocr-upload-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ausgabe-upload-title,
.ocr-upload-title { font-weight: 700; font-size: 13px; color: #0c4a6e; }
.ausgabe-upload-hint,
.ocr-upload-hint  { font-size: 11px; color: var(--text-muted); }
.ausgabe-upload-btn,
.ocr-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  align-self: flex-start;
}
.ocr-status {
  font-size: 12px; font-weight: 600; min-height: 18px;
  padding: 4px 0;
}

/* Material-Filter-Tabs (Großteile/Kleinteile) + Badges */
.material-filter-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 6px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.material-filter-tab {
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
  padding: 5px 11px; border-radius: 6px 6px 0 0; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.material-filter-tab:hover { background: var(--bg-muted, #f1f5f9); color: var(--text); }
.material-filter-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.material-typ-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; margin-right: 6px;
}
.material-typ-badge.grossteile { background: #dbeafe; color: #1e40af; }
.material-typ-badge.kleinteile { background: #f1f5f9; color: #475569; }
.material-rechnung-indicator {
  display: inline-flex; align-items: center; gap: 4px;
  background: #dcfce7; color: #15803d;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}

/* Sub-Portal Dateien-Sektion (Förderberater + andere Subs) */
.sub-portal-docs { margin: 16px 0; }
.sub-portal-docs .portal-section-title {
  font-size: 14px; font-weight: 700; color: #0c4a6e;
  margin-bottom: 10px;
}
.portal-doc-group {
  margin-bottom: 10px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.portal-doc-group-head {
  font-size: 13px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.portal-doc-count {
  background: #e2e8f0; color: #475569;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  margin-left: auto;
}
.portal-doc-group .portal-download-link {
  display: block; padding: 6px 10px; margin-top: 4px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  color: #0c4a6e; text-decoration: none; font-size: 13px;
}
.portal-doc-group .portal-download-link:hover {
  background: #f0f9ff; border-color: #0ea5e9;
}
.portal-doc-group .portal-download-link.disabled {
  color: #94a3b8; cursor: not-allowed;
}

/* Klickbare Komponenten-Zelle in der Dashboard-Projektmatrix */
.matrix-components-cell {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 4px 6px;
  cursor: pointer; transition: all .15s;
  font: inherit; color: inherit;
}
.matrix-components-cell:hover {
  background: #f0f9ff; border-color: #bae6fd;
}

/* ── v3.50 HERO-Gap Sprint 1: Montagebericht + Meine Einsätze ─────────────── */
body.mb-open { overflow: hidden; }
.mb-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mb-sheet { background: var(--card-bg); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.mb-sheet-small { width: min(440px, 100%); }
.mb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.mb-head h2 { font-size: 18px; font-weight: 800; }
.mb-head p { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.mb-body { padding: 4px 20px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mb-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: #f8fafc; }
.mb-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.mb-section:last-of-type { border-bottom: 0; }
.mb-section h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.mb-section h3 em, .mb-field em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.mb-hint { background: var(--accent-light); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 12px; font-size: 13px; margin-top: 12px; }
.mb-checks { display: flex; flex-direction: column; gap: 4px; }
.mb-check, .mb-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; }
.mb-check input, .mb-radio input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); margin-top: 1px; }
.mb-check:has(input:checked) { border-color: #86efac; background: #f0fdf4; }
.mb-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mb-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-top: 8px; }
.mb-field input, .mb-section textarea, .mb-mangel-add input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-weight: 400; background: #fff; }
.mb-section textarea { min-height: 0; resize: vertical; }
.mb-field input:focus-visible, .mb-section textarea:focus-visible, .mb-mangel-add input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.mb-ergebnis { display: grid; gap: 6px; }
.mb-maengel-head { font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.mb-mangel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
.mb-mangel-num { width: 22px; height: 22px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mb-mangel-text { flex: 1; }
.mb-mangel-text em { font-style: normal; color: var(--text-muted); }
.mb-mangel-add { display: grid; grid-template-columns: 1fr 160px auto; gap: 8px; margin-top: 8px; }
.mb-empty, .mb-note { color: var(--text-muted); font-size: 13px; }
.mb-note { margin-top: 8px; }
.mb-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.mb-foto { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #f8fafc; }
.mb-foto img { width: 100%; height: 110px; object-fit: cover; display: block; }
.mb-foto input { width: 100%; border: 0; border-top: 1px solid var(--border); padding: 8px; font-size: 13px; }
.mb-foto .btn { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.92); }
.mb-sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mb-sig-canvas { display: block; width: 100%; height: 160px; margin-top: 8px; border: 1.5px dashed #94a3b8; border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.mb-sig-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.mb-errors { background: #fef2f2; border-left: 3px solid #dc2626; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #991b1b; margin-top: 12px; }
.mb-errors ul { margin: 6px 0 0 18px; list-style: disc; }
.mb-done { text-align: center; padding: 28px 22px; }
.mb-done h2 { font-size: 18px; margin: 10px 0 6px; }
.mb-done p { color: var(--text-muted); }
.mb-done-icon { width: 52px; height: 52px; border-radius: 50%; background: #dcfce7; color: #16a34a; font-size: 26px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mb-done-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.sub-mb-box .btn { margin-top: 10px; }

.einsatz-wrap { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.einsatz-section h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.einsatz-section h2 span { background: #e2e8f0; color: var(--text); border-radius: 999px; padding: 1px 8px; margin-left: 4px; font-size: 12px; }
.einsatz-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #cbd5e1; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 8px; box-shadow: var(--shadow); }
.einsatz-heute { border-left-color: var(--accent); }
.einsatz-ueberfaellig { border-left-color: #dc2626; }
.einsatz-woche { border-left-color: #1d4ed8; }
.einsatz-kicker { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.einsatz-card h3 { font-size: 16px; font-weight: 700; margin: 2px 0; }
.einsatz-meta { font-size: 13px; color: var(--text-muted); }
.einsatz-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .mb-overlay { padding: 0; align-items: stretch; }
  .mb-sheet { border-radius: 0; max-height: 100dvh; height: 100dvh; width: 100%; }
  .mb-sig-grid { grid-template-columns: 1fr; }
  .mb-mangel-add { grid-template-columns: 1fr 1fr; }
  .mb-mangel-add .btn { grid-column: 1 / -1; min-height: 44px; }
  .mb-foot .btn { flex: 1; min-height: 44px; }
  .einsatz-card { flex-direction: column; align-items: stretch; }
  .einsatz-actions { justify-content: stretch; }
  .einsatz-actions .btn { flex: 1; min-height: 44px; justify-content: center; }
}