/* 06-tourplan-gantt.css · Teil 6 von 19 · Tourplan und Gantt. Reihenfolge der Dateien = Kaskade (index.html), nicht umsortieren. */
/* Tourplan-Steuerleiste + mögliche Projekte */
.tp-ctrl { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.tp-ctrl .btn.sec { padding:4px 10px; font-size:12px; }
.tp-plus { position:absolute; height:100%; }
.tp-prov { position:absolute; border-radius:6px; border:1.5px dashed; display:flex; align-items:center;
  overflow:hidden; cursor:pointer; box-sizing:border-box; }
.tp-prov-t { font-size:10px; font-weight:600; padding:0 6px; white-space:nowrap; pointer-events:none; }
.st-idee { background:#F0F1F6; border-color:#B9BDD0; color:#555; }
.st-tbc { background:#FFF3E0; border-color:#E0A83E; color:#8A5300; }
.st-reserviert { background:#E7F6EF; border-color:#5FB98E; color:#0A6B49; }
.tp-kopf-sp { flex:none; display:flex; flex-direction:column; }
.tp-month { flex:none; text-align:center; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  padding:5px 0 4px; border-left:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18);
  overflow:hidden; white-space:nowrap; }
.tp-month.tp-mon-jahr { border-left:2px solid var(--cyan); }
.tp-jahr { position:absolute; top:-1px; left:3px; font-size:8px; opacity:.7; }
.tp-months { display:flex; }
.tp-fix { position:absolute; top:4px; height:18px; border-radius:4px; background:var(--navy2); display:flex; align-items:center; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.tp-prov { top:4px; height:18px; }
.tp-prov-label { font-weight:600; }
.tp-prov-label.st-idee { color:#555; } .tp-prov-label.st-tbc { color:#8A5300; } .tp-prov-label.st-reserviert { color:#0A6B49; }
.tp-leg { display:inline-block; font-size:10px; font-weight:600; padding:1px 7px; border-radius:99px; border:1.5px dashed; }
/* Tourplan: Wochen-Header + Set-Spuren + ziehbare Items */
.tp-week { flex:none; text-align:center; color:#fff; font-size:9px; font-weight:600; padding:5px 0; border-left:1px solid rgba(255,255,255,.15); line-height:1.1; }
.tp-week span { display:block; font-weight:400; opacity:.75; font-size:8px; }
.tp-weeks { display:flex; }
.tp-row { display:flex; border-top:1px solid #EEF0F4; }
.tp-track { position:relative; flex:none; }
.tp-ueber b { color:#B4232A; }
.tp-item { position:absolute; top:3px; height:18px; border-radius:4px; display:flex; align-items:center;
  overflow:hidden; box-sizing:border-box; touch-action:none; user-select:none; }
.tp-item.zieh { cursor:grab; }
.tp-item.zieh:active { cursor:grabbing; }
.tp-item-t { font-size:10px; font-weight:600; padding:0 6px; white-space:nowrap; pointer-events:none; }
.tp-item.tp-fix { background:var(--navy2); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.tp-item.tp-fix .tp-item-t { color:#fff; }
.tp-item.tp-prov { border:1.5px dashed; }
.tp-item.st-idee { background:#F0F1F6; border-color:#B9BDD0; } .tp-item.st-idee .tp-item-t { color:#555; }
.tp-item.st-tbc { background:#FFF3E0; border-color:#E0A83E; } .tp-item.st-tbc .tp-item-t { color:#8A5300; }
.tp-item.st-reserviert { background:#E7F6EF; border-color:#5FB98E; } .tp-item.st-reserviert .tp-item-t { color:#0A6B49; }
.tp-leg { display:inline-block; font-size:10px; font-weight:600; padding:1px 7px; border-radius:99px; border:1.5px dashed; }
.tp-leg.st-idee { background:#F0F1F6; border-color:#B9BDD0; color:#555; }
.tp-leg.st-tbc { background:#FFF3E0; border-color:#E0A83E; color:#8A5300; }
.tp-leg.st-reserviert { background:#E7F6EF; border-color:#5FB98E; color:#0A6B49; }
/* Tourplan: editierbarer Set-Name, Warnhinweis, vertikal ziehbare Hub-Projekte, vertikaler Scroll */
.tp-wrap .tp-label { width:196px; }
.tp-lbl-row { display:flex; align-items:center; gap:5px; }
.tp-setname { flex:1; min-width:0; font-size:12px; font-weight:600; color:var(--navy); font-family:inherit;
  border:1px solid var(--border); border-radius:5px; padding:2px 6px; background:#F7F8FB; }
.tp-setname:hover { border-color:var(--pink); background:#fff; }
.tp-ord { display:flex; flex-direction:column; gap:1px; flex:none; }
.tp-ordb { border:1px solid var(--border); background:#fff; color:var(--navy); border-radius:3px;
  font-size:7px; line-height:1; padding:2px 4px; cursor:pointer; font-family:inherit; }
.tp-ordb:hover:not(:disabled) { border-color:var(--pink); color:var(--pink); }
.tp-ordb:disabled { opacity:.25; cursor:default; }
.tp-delb { flex:none; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:1px solid var(--border);
  background:#fff; color:var(--navy); border-radius:4px; cursor:pointer; }
.tp-delb .psub-i { width:13px; height:13px; }
.tp-delb:hover { border-color:#B4232A; color:#B4232A; }
.tp-delb.tp-delb-aus { opacity:.35; }
.tp-delb.tp-delb-aus:hover { opacity:.7; }
.tp-setname:focus { border-color:var(--pink); background:#fff; outline:none; }
.tp-warn { font-size:10px; font-weight:700; color:#B4232A; margin-top:2px; }
/* „Nicht zugeordnet": Einträge ohne Tour-Set (typisch neue Projekte) stehen
   zuoberst in einem getönten Band, bis jemand sie in ein Set zieht. */
.tp-row.tp-offen .tp-label, .tp-row.tp-offen .tp-track { background:#FFF8EC; }
.tp-row.tp-offen + .tp-row.tp-offen { border-top-color:#F6E7C8; }
.tp-row.tp-offen-ende { border-bottom:2px solid #E0A83E; }
.tp-row.tp-offen .tp-label b { color:#8A5300; }
.tp-offen-hint { font-size:10px; color:#8A5300; margin-top:1px; }
.tp-info-offen { color:#8A5300; font-weight:700; background:#FFF3E0; padding:1px 8px; border-radius:99px; }
.tp-info-konflikt { color:#B4232A; font-weight:700; }
/* Termine unvollstaendig (neues Projekt): Balken schraffiert, Zeitraum aus dem naechstbesten Termin geschaetzt */
.tp-item.tp-fix.tp-unvoll { background:repeating-linear-gradient(135deg, var(--navy2) 0 6px, #5B5FA0 6px 12px); outline:1px dashed #9A9CC8; outline-offset:1px; }
.tp-info-unvoll { color:#45434F; background:#ECEBFA; padding:1px 8px; border-radius:99px; }
/* Projekte ganz ohne Termine: nicht platzierbar, darum als Hinweis ueber dem Plan */
.tp-ohne { font-size:12.5px; color:#45434F; background:#FFF8EC; border-left:3px solid #E0A83E; border-radius:0 8px 8px 0; padding:7px 12px; margin:0 0 10px; line-height:1.5; }
.tp-ohne a { color:var(--navy); font-weight:600; }
.tp-item.tp-fix.zieh { cursor:grab; }
.tp-item.tp-fix.zieh:active { cursor:grabbing; }
/* Tourplan-Formular: gewaehlte Spanne in Kalenderwochen */
.tp-kw { font-size:12.5px; color:var(--navy2); font-weight:700; margin:-6px 0 12px; }
.tp-kw-d { color:var(--muted); font-weight:400; margin-left:6px; }
/* Tourplan-Formular: Material im Zeitraum (aus den Setup-Kategorien) */
.tp-mat { border:1px solid var(--border); border-radius:8px; background:#FAFBFF;
  max-height:260px; overflow:auto; padding:6px 8px; }
.tp-mat-leer { font-size:12.5px; color:var(--muted); padding:6px 2px; }
.tp-mat-g { margin-bottom:8px; }
.tp-mat-g:last-of-type { margin-bottom:2px; }
.tp-mat-gk { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--navy2); padding:3px 2px; }
.tp-mat-n { background:#EEF0FB; border-radius:99px; padding:0 7px; font-size:10px; }
.tp-mat-r { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:3px 6px;
  border-radius:6px; background:#fff; border:1px solid #EFF0F6; margin-bottom:3px; }
.tp-mat-t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-mat-v { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tp-mat-b { color:var(--muted); font-size:11px; white-space:nowrap; }
/* Ampel wie im Material-Gantt: frei / genau aufgebraucht / ueberbucht */
.tp-mat-r.ok .tp-mat-v { color:#1B7F4B; }
.tp-mat-r.full { background:#FFF7ED; border-color:#F3D9B5; }
.tp-mat-r.full .tp-mat-v { color:#8A5300; }
.tp-mat-r.over { background:#FDECEE; border-color:#F0C2C6; }
.tp-mat-r.over .tp-mat-v { color:#B3261E; }
.tp-mat-r.unbek .tp-mat-v { color:var(--muted); font-weight:400; }
.tp-mat-f { font-size:11px; color:var(--muted); padding:4px 2px 2px; border-top:1px solid #EFF0F6; }
.tp-wrap-scroll { overflow:auto; max-height:62vh; }
/* Tour-Karte + Datums-Schieber */
.tp-karte-box { margin-top:16px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.tp-slider-row { display:flex; align-items:center; gap:14px; padding:10px 14px; border-bottom:1px solid var(--border); }
.tp-slider-row input[type=range] { flex:1; accent-color:var(--pink); }
.tp-slider-datum { font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--navy); min-width:96px; }
.tp-karte { height:420px; width:100%; }
/* Gantt + Tourplan gemeinsame Zeitleiste */
.g-wrap, .tp-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:#fff; }
.g-header, .tp-header { display:flex; position:sticky; top:0; z-index:3; background:var(--navy);
  width:max-content; min-width:100%; }
.g-label, .tp-label { flex:none; width:170px; padding:6px 10px; box-sizing:border-box; position:sticky; left:0; z-index:2;
  background:#fff; border-right:1px solid var(--border); font-size:12px; line-height:1.25; }
.g-corner, .tp-corner { background:var(--navy); color:#fff; font-weight:700; display:flex; align-items:center; }
.g-label b, .tp-label b { color:var(--navy); } .g-label span, .tp-label span { color:var(--muted); font-size:11px; }
.g-months, .tp-weeks { display:flex; flex:none; }
.g-month { flex:none; text-align:center; color:#fff; font-size:10px; font-weight:600; padding:8px 0;
  border-left:1px solid rgba(255,255,255,.15); overflow:hidden; white-space:nowrap; box-sizing:border-box; }
.g-month.g-jahr { border-left:2px solid var(--cyan); font-weight:800; }
.tp-week { flex:none; text-align:center; color:#fff; font-size:10px; font-weight:600; padding:6px 0; border-left:1px solid rgba(255,255,255,.15); }
.tp-week span { display:block; font-weight:400; opacity:.8; font-size:9px; }
.g-row, .tp-row { display:flex; border-top:1px solid #EEF0F4; width:max-content; min-width:100%; }
.g-track { position:relative; height:30px; flex:none; }
.tp-track { position:relative; flex:none; }
.g-bar { position:absolute; top:6px; height:18px; border-radius:4px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.g-spiel { position:absolute; top:0; height:100%; background:rgba(255,255,255,.45); border-radius:3px; }
.g-today, .tp-today { position:absolute; top:0; bottom:0; width:2px; background:var(--cyan); z-index:1; }
.tp-bar { position:absolute; top:7px; height:24px; border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.18);
  display:flex; align-items:center; overflow:hidden; cursor:pointer; touch-action:none; user-select:none; }
.tp-bar.zieh { cursor:grab; }
.tp-bar.zieh:active, .tp-bar.dragging { cursor:grabbing; }
.tp-bar.speichert { opacity:.55; }
.tp-bar-t { color:#fff; font-size:11px; font-weight:600; padding:0 8px; white-space:nowrap; pointer-events:none; }
.g-hint, .tp-hint { font-size:12px; color:var(--muted); margin-bottom:10px; }
.g-hint { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
/* Gantt — aufklappbarer Unter-Gantt je Projekt */
.g-prow .g-label { cursor:pointer; }
.g-prow .g-label:hover b { color:var(--pink); }
.g-bar { transition:box-shadow .12s; }
.g-bar.auf { box-shadow:0 0 0 2px var(--cyan); }
.g-prow .g-label.auf { box-shadow:inset -3px 0 0 var(--cyan); }
.g-detail { display:contents; }
.g-drow { background:#F6F7FB; }
.g-drow .g-track { height:26px; background:#F6F7FB; }
.g-dlabel { background:#F6F7FB; font-size:11px; color:var(--navy); padding-left:24px;
  display:flex; flex-direction:column; justify-content:center; line-height:1.2; }
.g-dlabel span { font-size:10px; color:#9AA0B4; font-weight:400; }
.g-dbar { position:absolute; top:7px; height:12px; border-radius:3px; z-index:2; }
.g-dfoot-c { flex:none; padding:5px 14px; font-size:12px; display:flex; align-items:center; }

/* Planspiel (Sandbox der Tourenplanung) — Vorlage Vorlagen/planspiel.html: Banner, Kennzahlen als Filter,
   Zeitachse mit Fehlmengen je Woche und Set-Gruppen, Detail rechts. Farben nur hier (Präfix --ps-). */
.ps { --ps-bad:#d92d45; --ps-bad-bg:#fde9ec; --ps-bad-tx:#8f1426; --ps-warn:#d97706; --ps-warn-bg:#fef1d6; --ps-warn-tx:#8a4b04;
  --ps-ok:#16915a; --ps-ok-bg:#dcf5e7; --ps-ok-tx:#0d5f3a; --ps-none:#8d8ca8; --ps-none-bg:#f1f1f7; --ps-indigo:#4f46e5;
  --ps-line:#e6e6ef; --ps-grid:#eeeef5; --ps-surface2:#f1f1f7; --ps-shadow:0 1px 2px rgba(27,26,77,.06);
  display:flex; flex-direction:column; gap:14px; font-size:13px; }
.ps-banner { display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#fff3d9;
  border:1px solid #f3d48c; border-radius:10px; padding:9px 14px; }
.ps-banner p { margin:0; }
.ps-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.ps-pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:#fff; border:1px solid var(--ps-line); font-weight:600; font-size:12px; color:var(--navy); }
.ps-wer { font-weight:600; color:var(--ps-bad); }
.ps-konflikt { padding:10px 14px; border-radius:10px; background:var(--ps-bad-bg); border:1px solid #efb3bc; color:var(--ps-bad-tx); }
.ps-konflikt .ps-btn { margin-left:6px; }
.ps-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }
.ps-grp { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ps-btn { border:1px solid var(--ps-line); background:#fff; border-radius:8px; padding:6px 12px; font:inherit; font-weight:600; font-size:12px; color:var(--navy); cursor:pointer; }
.ps-btn:hover { border-color:var(--muted); }
.ps-btn:disabled { opacity:.6; cursor:default; }
.ps-btn.ps-primary { background:var(--navy); color:#fff; border-color:var(--navy); }
.ps-btn.ps-rot { color:var(--ps-bad); }
.ps-btn:focus-visible, .ps-bar:focus-visible, .ps-tile:focus-visible, .ps-chip:focus-visible { outline:2px solid var(--ps-indigo); outline-offset:2px; }
.ps-hinweise { margin:0; padding:8px 14px 8px 30px; border-radius:10px; background:#eef0fb; color:var(--navy2); font-size:12.5px; }
.ps-hinweise li + li { margin-top:3px; }
.ps-leer { padding:22px 18px; color:var(--muted); text-align:center; }
.ps-card { background:#fff; border:1px solid var(--ps-line); border-radius:12px; box-shadow:var(--ps-shadow); min-width:0; }
.ps-card.ps-pad { padding:14px 16px; }
.ps-card h3 { margin:14px 0 8px; font-size:12.5px; color:var(--navy); }

/* Kennzahlen als Filter */
.ps-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.ps-tile { display:flex; align-items:center; gap:12px; text-align:left; background:#fff; border:1px solid var(--ps-line); border-radius:10px;
  padding:11px 14px; box-shadow:var(--ps-shadow); font:inherit; color:inherit; cursor:pointer; }
.ps-tile::before { content:""; width:4px; align-self:stretch; border-radius:3px; background:var(--ps-c, var(--ps-line)); }
.ps-tile .ps-n { font-size:22px; font-weight:700; line-height:1; min-width:34px; }
.ps-tile .ps-l { color:var(--muted); font-size:12px; line-height:1.25; }
.ps-tile .ps-l b { display:block; color:#1F2430; font-weight:600; font-size:12.5px; }
.ps-t-bad { --ps-c:var(--ps-bad); } .ps-t-bad .ps-n { color:var(--ps-bad); }
.ps-t-none { --ps-c:var(--ps-none); }
.ps-t-moved { --ps-c:var(--ps-indigo); }
.ps-t-peak { --ps-c:var(--ps-warn); } .ps-t-peak .ps-n { color:var(--ps-warn); }
.ps-tile[aria-pressed="true"] { border-color:var(--ps-c); box-shadow:0 0 0 1px var(--ps-c); }

/* Arbeitsfläche: Zeitachse + Detail */
.ps-work { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-items:start; }
.ps-work.ps-offen { grid-template-columns:minmax(0, 1fr) 410px; }
.ps-tlcard { overflow:hidden; }
.ps-tltools { padding:10px 14px; border-bottom:1px solid var(--ps-line); }
.ps-zoom { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.ps-zoom input { width:90px; accent-color:var(--navy); }
.ps-sw { display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:12px; color:var(--muted); cursor:pointer; user-select:none; }
.ps-sw input { appearance:none; width:30px; height:17px; border-radius:99px; background:var(--ps-line); position:relative; margin:0; cursor:pointer; }
.ps-sw input::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:transform .15s; }
.ps-sw input:checked { background:var(--navy); } .ps-sw input:checked::after { transform:translateX(13px); }
.ps-stand { font-size:11.5px; color:var(--muted); }
.ps-scroll { overflow:auto; max-height:calc(100vh - 330px); min-height:420px; position:relative; }
.ps-tl { position:relative; }
.ps-head { position:sticky; top:0; z-index:6; display:flex; background:var(--navy); color:#fff; }
.ps-corner { position:sticky; left:0; z-index:7; flex:0 0 150px; background:var(--navy); padding:0 14px; display:flex; align-items:center;
  font-weight:700; font-size:12px; border-right:1px solid rgba(255,255,255,.1); }
.ps-axis { position:relative; height:44px; flex:none; }
.ps-m { position:absolute; top:0; height:22px; padding:4px 8px; font-size:11px; font-weight:600; border-left:1px solid rgba(255,255,255,.18);
  white-space:nowrap; overflow:hidden; box-sizing:border-box; }
.ps-w { position:absolute; top:22px; height:22px; text-align:center; font-size:10px; line-height:22px; color:#a9a8dd; border-left:1px solid rgba(255,255,255,.07); box-sizing:border-box; }
.ps-todaytag { position:absolute; top:24px; transform:translateX(-50%); background:var(--ps-indigo); color:#fff; font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:99px; pointer-events:none; }
.ps-rows { position:relative; }
.ps-row { display:flex; border-bottom:1px solid var(--ps-line); height:42px; }
.ps-lab { position:sticky; left:0; z-index:4; flex:0 0 150px; background:#fff; padding:0 14px; display:flex; flex-direction:column; justify-content:center;
  font-weight:600; font-size:12px; border-right:1px solid var(--ps-line); box-sizing:border-box; color:var(--navy); }
.ps-ueber { font-size:10px; font-weight:500; color:var(--ps-bad); }
.ps-lane { position:relative; flex:0 0 auto; background-image:linear-gradient(to right, var(--ps-grid) 1px, transparent 1px); }
.ps-row.ps-grouprow { height:30px; background:var(--ps-surface2); }
.ps-row.ps-grouprow .ps-lab { background:var(--ps-surface2); border:0; }
.ps-row.ps-grouprow .ps-lane { background-image:none; }
.ps-grouprow button { all:unset; cursor:pointer; display:flex; gap:8px; align-items:center; font-weight:700; font-size:12px; }
.ps-grouprow button:focus-visible { outline:2px solid var(--ps-indigo); outline-offset:2px; }
.ps-chev { display:inline-block; transition:transform .15s; font-size:9px; }
.ps-zu .ps-chev { transform:rotate(-90deg); }
.ps-gcount { font-weight:500; color:var(--muted); font-size:11px; position:sticky; left:170px; display:inline-block; padding:7px 10px; }
.ps-row.ps-tray, .ps-row.ps-tray .ps-lab { background:#fff8ec; }
.ps-row.ps-tray .ps-lab { color:#8a5300; }
.ps-row.ps-heat { height:44px; }
.ps-row.ps-heat .ps-lab { color:var(--ps-bad); font-size:11.5px; line-height:1.2; }
.ps-hc { position:absolute; bottom:4px; border-radius:3px 3px 0 0; background:var(--ps-bad); opacity:.85; }
.ps-hc:hover { opacity:1; }
.ps-shade { position:absolute; top:0; bottom:0; background:rgba(27,26,77,.045); pointer-events:none; }
.ps-today { position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--ps-indigo); z-index:3; pointer-events:none; }

/* Balken: Status in Farbe, Symbol und Fehlmenge */
.ps-bar { position:absolute; top:7px; height:28px; border-radius:7px; border:1px solid var(--ps-bc); border-left-width:5px; background:var(--ps-bgc);
  color:var(--ps-txc); display:flex; align-items:center; gap:6px; padding:0 8px; font-weight:600; font-size:11.5px; white-space:nowrap; overflow:hidden;
  cursor:pointer; touch-action:none; user-select:none; box-sizing:border-box; transition:opacity .15s, box-shadow .15s; }
.ps-bar.zieh { cursor:grab; }
.ps-bar.zieh:active { cursor:grabbing; }
.ps-bar.ps-bad { --ps-bc:var(--ps-bad); --ps-bgc:var(--ps-bad-bg); --ps-txc:var(--ps-bad-tx); }
.ps-bar.ps-warn { --ps-bc:var(--ps-warn); --ps-bgc:var(--ps-warn-bg); --ps-txc:var(--ps-warn-tx); }
.ps-bar.ps-ok { --ps-bc:var(--ps-ok); --ps-bgc:var(--ps-ok-bg); --ps-txc:var(--ps-ok-tx); }
.ps-bar.ps-unk { --ps-bc:var(--ps-none); --ps-bgc:var(--ps-none-bg); --ps-txc:var(--navy); }
.ps-bar.ps-none { --ps-bc:var(--ps-none); --ps-bgc:var(--ps-none-bg); --ps-txc:var(--muted); border-style:dashed; border-left-style:solid; }
.ps-bar.ps-sel { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ps-indigo); z-index:2; }
.ps-bar.ps-rel { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ps-warn); z-index:1; }
.ps-bar.ps-dim { opacity:.3; }
.ps-bar.ps-off { opacity:.18; }
.ps-ic { flex:0 0 auto; width:14px; height:14px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; background:var(--ps-bc); color:#fff; }
.ps-nm { overflow:hidden; text-overflow:ellipsis; }
.ps-tag { flex:none; font-size:9.5px; font-weight:600; padding:0 5px; border-radius:4px; border:1px dashed currentColor; opacity:.8; }
.ps-sh { flex:none; font-weight:500; opacity:.8; font-size:10.5px; }
.ps-miss { flex:none; margin-left:auto; font-size:10.5px; font-weight:700; background:var(--ps-bc); color:#fff; border-radius:99px; padding:0 6px; }
.ps-note { padding:8px 16px; background:var(--ps-surface2); border-top:1px solid var(--ps-line); font-size:12px; color:var(--muted); }
.ps-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:10px 16px; border-top:1px solid var(--ps-line); font-size:11.5px; color:var(--muted); }
.ps-legend span { display:inline-flex; align-items:center; gap:6px; }
.ps-legend .ps-legr { margin-left:auto; }
.ps-dot { width:10px; height:10px; border-radius:3px; border:1px solid var(--ps-c); background:var(--ps-b); border-left-width:4px; }
.ps-dot.ps-ok { --ps-c:var(--ps-ok); --ps-b:var(--ps-ok-bg); } .ps-dot.ps-warn { --ps-c:var(--ps-warn); --ps-b:var(--ps-warn-bg); }
.ps-dot.ps-bad { --ps-c:var(--ps-bad); --ps-b:var(--ps-bad-bg); } .ps-dot.ps-none { --ps-c:var(--ps-none); --ps-b:var(--ps-none-bg); border-style:dashed; }

/* Detail */
.ps-panel { position:sticky; top:14px; max-height:calc(100vh - 28px); overflow:auto; }
.ps-panel header { padding:16px 18px 12px; border-bottom:1px solid var(--ps-line); position:relative; }
.ps-eyebrow { font-size:11px; color:var(--muted); font-weight:600; }
.ps-panel h2 { margin:2px 28px 4px 0; font-size:18px; font-weight:700; color:var(--navy); }
.ps-sub { color:var(--muted); font-size:12px; }
.ps-x { position:absolute; right:12px; top:12px; border:0; background:var(--ps-surface2); border-radius:8px; width:28px; height:28px; cursor:pointer; }
.ps-badges, .ps-acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ps-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:600; background:var(--ps-b); color:var(--ps-t); white-space:nowrap; }
.ps-badge.ps-bad { --ps-b:var(--ps-bad-bg); --ps-t:var(--ps-bad-tx); } .ps-badge.ps-warn { --ps-b:var(--ps-warn-bg); --ps-t:var(--ps-warn-tx); }
.ps-badge.ps-ok { --ps-b:var(--ps-ok-bg); --ps-t:var(--ps-ok-tx); } .ps-badge.ps-none, .ps-badge.ps-unk { --ps-b:var(--ps-none-bg); --ps-t:var(--muted); }
.ps-sec { padding:14px 18px; border-bottom:1px solid var(--ps-line); }
.ps-sec:last-child { border-bottom:0; }
.ps-sec h3 { margin:0 0 10px; font-size:12.5px; font-weight:700; display:flex; justify-content:space-between; align-items:center; color:var(--navy); }
.ps-allshift { display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--muted); font-size:12px; }
.ps-dates { display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; align-items:center; }
.ps-dates .ps-k { font-weight:600; }
.ps-dates .ps-k.ps-grau { color:var(--muted); font-weight:500; }
.ps-dates .ps-v { font-size:12.5px; }
.ps-dates .ps-v small { display:block; color:var(--muted); font-size:11px; }
.ps-steps { display:inline-flex; gap:4px; }
.ps-steps button { border:1px solid var(--ps-line); background:#fff; border-radius:7px; padding:3px 9px; font:inherit; font-weight:600; font-size:12px; cursor:pointer; }
.ps-steps button:hover { border-color:var(--muted); }
.ps-f { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); margin-top:10px; }
.ps-f input, .ps-f select, .ps-add select { font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--ps-line); border-radius:6px; color:#1F2430; }
.ps-edit { margin-top:14px; border-top:1px solid var(--ps-line); padding-top:12px; }
.ps-mat { display:flex; flex-direction:column; gap:10px; }
.ps-mc { border:1px solid var(--ps-line); border-radius:10px; padding:10px 12px; }
.ps-mt { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.ps-mt b { font-weight:600; font-size:12.5px; }
.ps-mt small { display:block; color:var(--muted); font-size:11px; }
.ps-cap { position:relative; height:8px; border-radius:99px; background:var(--ps-surface2); margin:9px 0 6px; overflow:hidden; }
.ps-cap i { position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--ps-ok); }
.ps-cap.ps-warn i { background:var(--ps-warn); } .ps-cap.ps-bad i { background:var(--ps-bad); } .ps-cap.ps-unk i, .ps-cap.ps-none i { background:var(--ps-none); }
.ps-nums { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.ps-nums b { color:#1F2430; font-weight:600; }
.ps-frei.ps-bad b { color:var(--ps-bad); }
.ps-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.ps-chip { border:1px solid var(--ps-line); background:var(--ps-surface2); border-radius:99px; padding:1px 9px; font:inherit; font-size:11px; font-weight:500; }
button.ps-chip { cursor:pointer; color:var(--navy); }
button.ps-chip:hover { border-color:var(--ps-indigo); }
.ps-chip.ps-fremd { color:var(--muted); }
.ps-verk { margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--ps-none-bg); border:1px dashed var(--ps-none); font-size:12px; display:flex; flex-direction:column; gap:4px; }

/* Tabellen (Konflikte, Szenarien, Material von Hand), Kategorien */
.ps-tab { border-collapse:collapse; font-size:12px; width:100%; }
.ps-tab th { text-align:left; font-weight:600; color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--ps-line); background:var(--th-bg); }
.ps-tab td { padding:6px 8px; border-bottom:1px solid #F0EFEA; vertical-align:top; }
.ps-tab .num { text-align:right; font-variant-numeric:tabular-nums; }
.ps-tab .ps-btn { padding:3px 8px; font-size:11px; margin:0 2px 2px 0; }
.ps-nowrap { white-space:nowrap; }
.ps-menge { width:64px; font:inherit; font-size:12px; padding:3px 6px; border:1px solid var(--ps-line); border-radius:6px; }
.ps-add { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.ps-add select { max-width:240px; font-size:12px; }
.ps-kat { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 14px; margin:10px 0 14px; font-size:13px; }
@media (max-width:1280px) { .ps-work.ps-offen { grid-template-columns:minmax(0, 1fr); } .ps-panel { position:static; max-height:none; } }
@media (max-width:1000px) { .ps-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion:reduce) { .ps-bar, .ps-chev, .ps-sw input::after { transition:none; } }