/* Paket Q – Projektierung (After Sales): Kanban, Projektdetail, Montageplan, Abrechnung. Ergänzt v3.css/crm-workflow.css. */
:root { --pj-pv: #f2a900; --pj-wp: #2e9e5b; --pj-klima: #2a8fc7; }
.late { color: var(--red); }
.pj-demo { display: inline-flex; align-items: center; font: 600 10.5px Inter, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 1px 7px; vertical-align: middle; cursor: help; }
.pj-cp .pj-search { width: min(520px, 100%); }
.pj-cp .pj-search input { flex: 1; min-width: 0; }

/* Gewerk-Kennzeichnung */
.pj-type { display: inline-flex; align-items: center; gap: 3px; font: 700 10.5px Inter, sans-serif; padding: 2px 7px; border-radius: 999px; white-space: nowrap; color: #fff; background: var(--pj-pv); flex: none; }
.pj-type.t-PV { background: #fff1c8; color: #7a5500; }
.pj-type.t-WP { background: #dff3e6; color: #1d6e3d; }
.pj-type.t-Klima { background: #def0fa; color: #17608a; }
.crm-kanban .k-card.pj-card { border-left: 4px solid var(--line); }
.pj-card.t-PV { border-left-color: var(--pj-pv) !important; }
.pj-card.t-WP { border-left-color: var(--pj-wp) !important; }
.pj-card.t-Klima { border-left-color: var(--pj-klima) !important; }
.pj-card-rows { display: grid; gap: 3px; font-size: 12px; color: var(--text); }
.pj-card-rows > span { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.pj-card-rows svg { color: var(--muted); flex: none; }
.pj-pay { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 10px Inter, sans-serif; background: var(--line-2); color: var(--muted); flex: none; }
.pj-pay.g { background: var(--green); color: #fff; } .pj-pay.y { background: var(--yellow); color: var(--ink); } .pj-pay.r { background: var(--red); color: #fff; }
.pj-card .k-foot { gap: 6px; }
.pj-num { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--yellow); font: 700 10px Poppins, sans-serif; margin-right: 6px; vertical-align: 1px; }
.pj-board-head p { flex: 1 1 100%; }
.pj-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.pj-filter { display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.pj-filter select, .pd-head select, .pd-slot-grid select, .pd-slot-grid input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); font: 13px Inter, sans-serif; min-width: 0; max-width: 100%; }
.pj-total { align-self: center; }
.crm-group.sales .crm-group-line { border-top-color: var(--green); }

/* Dialoge */
.pj-warn { background: var(--red-soft); color: #8f2a24; border-radius: 6px; padding: 8px 10px; font-size: 12.5px; margin: 6px 0; }
.pj-warn ul { margin: 6px 0 4px 18px; padding: 0; }
.pj-warn small { display: block; color: #8f2a24; }
.pj-warn.pausiert { background: var(--yellow-soft); color: var(--yellow-text); }
.pj-form textarea, .pj-form input:not([type=checkbox]), .pj-form select { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 6px; font: 13px Inter, sans-serif; background: var(--card); color: var(--text); }
.pj-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; font-size: 13px; }
.pj-dl dt { color: var(--muted); } .pj-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pj-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; max-height: 360px; overflow: auto; }
.pj-hist li { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; overflow-wrap: anywhere; }
.pj-hist small { display: block; color: var(--muted); font-size: 11.5px; }
.pj-h4 { font-size: 13px; margin: 12px 0 6px; }
.pj-note { background: var(--blue-soft); color: var(--blue); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.pj-inv-paper { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fcfcfa; }
.pj-inv-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }

/* Projektdetail */
.pd { max-width: 1460px; }
.pd-cp .cp-mid { justify-content: flex-start; min-width: 0; }
.pd-cp { grid-template-columns: auto minmax(0, 1fr) auto; }
.pd-head { padding: 18px 20px; margin-bottom: 16px; }
.pd-title { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: flex-start; }
.pd-title h1 { font-size: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.pd-title p { margin: 0; font-size: 13px; }
.pd-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.pd-kpis > div { border: 1px solid var(--line-2); background: var(--bg); border-radius: 8px; padding: 8px 10px; min-width: 0; display: grid; gap: 3px; align-content: start; }
.pd-kpis small { color: var(--muted); font-size: 11.5px; }
.pd-kpis b { font: 600 14px Poppins, sans-serif; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.pd-why { overflow-wrap: anywhere; }
.pd-meter { display: block; height: 5px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.pd-meter i { display: block; height: 100%; background: var(--green); }
.pd-ro { margin: 10px 0 0; display: flex; gap: 6px; align-items: center; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.pd-col, .pd-aside { display: grid; gap: 16px; min-width: 0; }
.pd-sec { padding: 16px 18px; min-width: 0; }
.pd-sec h2 { font-size: 16px; margin: 0; }
.pd-aside .pd-sec h2 { margin-bottom: 6px; }
.pd-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.pd-sec-head .btn { margin-left: auto; }
.pd-phase { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; margin: 8px 0; background: var(--card); }
.pd-phase.done { border-left-color: var(--green); } .pd-phase.cur { border-left-color: var(--yellow); } .pd-phase.bad { border-left-color: var(--red); }
.pd-phase summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; }
.pd-phase summary::-webkit-details-marker { display: none; }
.pd-phase summary b { flex: 1; min-width: 0; font-size: 13.5px; }
.pd-ico { width: 20px; text-align: center; color: var(--muted); }
.pd-phase.done .pd-ico { color: var(--green); } .pd-phase.cur .pd-ico { color: var(--yellow-text); }
.pd-count { font-size: 12px; font-weight: 600; color: var(--muted); }
.pd-steps { list-style: none; margin: 0; padding: 0 12px 8px; }
.pd-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line-2); }
.pd-step-main b { font-weight: 500; font-size: 13px; }
.pd-step-main small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; overflow-wrap: anywhere; }
.pd-step.done .pd-step-main b { color: var(--muted); text-decoration: line-through; text-decoration-color: #bbb; }
.pd-step.late .pd-step-main b, .pd-step.warn .pd-step-main b { color: #8f2a24; }
.pd-check { display: grid; place-items: center; min-height: 24px; }
.pd-check input { width: 18px; height: 18px; accent-color: var(--green); }
.pd-step .btn-link { white-space: nowrap; }
.pd-slots { display: grid; gap: 10px; }
.pd-slot { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; }
.pd-slot.erledigt { background: #f5fbf7; } .pd-slot.conflict { border-color: #f3c9c5; }
.pd-slot-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pd-slot-head small { flex: 1 1 100%; }
.pd-slot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
.pd-slot-grid label { display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 600; min-width: 0; }
.pd-slot-grid input, .pd-slot-grid select { width: 100%; }
.pd-table { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
.pd-inv-acts, .iv-acts { white-space: nowrap; text-align: right; }
.pd-inv-acts .btn, .iv-acts .btn { margin-left: 4px; }
.pd-comps { margin: 6px 0 0 18px; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.pd-h.g { color: var(--green); } .pd-h.y { color: var(--yellow-text); } .pd-h.r { color: var(--red); }

/* Montageplan */
.mp-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-label { font-size: 13px; white-space: nowrap; }
.mp-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-kpis span { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.mp-kpis b { font: 600 15px Poppins, sans-serif; color: var(--text); margin-right: 4px; }
.mp-kpis .r b { color: var(--red); }
.mp-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.mp-chip-l { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.mp-chip-l.geplant { border-style: dashed; } .mp-chip-l.bestaetigt { background: var(--blue-soft); } .mp-chip-l.erledigt { background: var(--green-soft); }
.mp-panel { padding: 0; overflow: hidden; margin-bottom: 16px; }
.mp-grid { overflow-x: auto; }
.mp-row { display: grid; grid-template-columns: 170px repeat(7, minmax(120px, 1fr)); min-width: 1010px; border-bottom: 1px solid var(--line-2); }
.mp-headrow { background: var(--bg); font-size: 12px; font-weight: 600; }
.mp-team, .mp-day, .mp-cell { padding: 8px; border-right: 1px solid var(--line-2); min-width: 0; }
.mp-team small { display: block; color: var(--muted); font-size: 11px; }
.mp-day.today, .mp-cell.today { background: var(--yellow-soft); }
.mp-day.we, .mp-cell.we { background: #fafaf8; }
.mp-cell { display: grid; gap: 4px; align-content: start; min-height: 64px; }
.mp-cell.clash { background: var(--red-soft); }
.mp-chip { display: grid; gap: 1px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); border-left: 4px solid var(--pj-pv); background: var(--card); color: var(--text); font-size: 11.5px; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.mp-chip b { font-size: 12px; display: flex; align-items: center; gap: 3px; }
.mp-chip small { color: var(--muted); font-size: 10.5px; }
.mp-chip.t-WP { border-left-color: var(--pj-wp); } .mp-chip.t-Klima { border-left-color: var(--pj-klima); }
.mp-chip.geplant { border-style: dashed; border-left-style: solid; } .mp-chip.bestaetigt { background: #f3f7ff; } .mp-chip.erledigt { background: #f2faf5; opacity: .85; }
.mp-chip.clash { border-color: var(--red); color: #8f2a24; } .mp-chip.paused { opacity: .6; }
.mp-chip:hover { border-color: var(--ink); }
.mp-agenda { display: none; }
.mp-aday { padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.mp-aday.today { background: var(--yellow-soft); }
.mp-aday h3 { font-size: 13px; margin: 0 0 6px; }
.mp-arow { display: grid; gap: 3px; margin-bottom: 6px; }
.mp-ateam { font-size: 11px; font-weight: 600; color: var(--muted); }
.mp-open { padding: 14px 16px; }
.mp-open h2 { font-size: 15px; margin: 0 0 8px; }
.mp-openlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.mp-openlist li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }

/* Abrechnung */
.iv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.iv-kpis button { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font: inherit; color: var(--text); min-width: 0; }
.iv-kpis button.on { outline: 2px solid var(--ink); }
.iv-kpis small { color: var(--muted); font-size: 12px; }
.iv-kpis b { font: 600 20px Poppins, sans-serif; }
.iv-kpis span { font-size: 12.5px; }
.iv-kpis .r b { color: var(--red); } .iv-kpis .g b { color: var(--green); }
.iv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pj-chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 5px 11px; font: 600 12px Inter, sans-serif; cursor: pointer; color: var(--text); }
.pj-chip span { color: var(--muted); font-weight: 500; margin-left: 2px; }
.pj-chip.on { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.iv-wrap { border: 1px solid var(--line); border-radius: 8px; }
.iv-wrap tr.danger td { background: #fff7f6; }
.iv-wrap tfoot td { padding: 9px 10px; border-top: 1px solid var(--line); }
.iv .wb-heading p, .mp .wb-heading p { margin: 4px 0 0; }

@media (max-width: 1100px) { .pd-grid { grid-template-columns: 1fr; } .pd-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .mp-grid { display: none; } .mp-agenda { display: block; }
  .iv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-head { padding: 14px; } .pd-sec { padding: 14px 12px; }
  .pd-title h1 { font-size: 19px; }
  .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-step { grid-template-columns: 28px minmax(0, 1fr); } .pd-step .btn-link { grid-column: 2; justify-self: start; padding-left: 0; }
  .pd-inv-acts, .iv-acts { white-space: normal; text-align: left; }
  .pd-inv-acts .btn, .iv-acts .btn { margin: 4px 4px 0 0; }
  .pd-table table.o-list.cards tbody tr:not(.group) { margin: 8px; }
  .pj-cp .pj-search { width: 100%; }
  .pd-cp { grid-template-columns: minmax(0, 1fr); } .pd-cp .cp-right:empty { display: none; }
  .pj-filters { width: 100%; } .pj-filter { flex: 1 1 140px; } .pj-filter select { width: 100%; }
}
@media (max-width: 360px) { .pd-kpis, .pd-slot-grid { grid-template-columns: minmax(0, 1fr); } .iv-kpis b { font-size: 17px; } }