/* NP Trans – Plantafel (Neugestaltung 01.10.2026, Chef: „die Grafik muss viel, viel besser sein“)
 * Leitstand-Optik: dunkel als Vorgabe, hell umschaltbar. Aktive Aufträge leuchten, erledigte treten zurück.
 * Schrift Inter (SIL Open Font License, selbst gehostet — kein Fremdserver). */
@font-face{font-family:"PT Inter";src:url(schrift/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PT Inter";src:url(schrift/Inter-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PT Inter";src:url(schrift/Inter-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"PT Inter";src:url(schrift/Inter-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}

/* ------------------------------------------------------------------ Farben (Thema) */
:root{
  --pt-h:60px;--pt-sp:132px;--pt-zeit:58px;--pt-fs:1;--pt-kopfh:84px;
  --pt-bg:#ffffff;--pt-bg2:#f7f8fa;--pt-bg3:#eef0f4;--pt-ln:#e4e7ec;--pt-ln2:#f1f3f6;
  --pt-tx:#0f172a;--pt-tx2:#64748b;--pt-tx3:#94a3b8;--pt-schatten:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06);
  --pt-akzent:#2f5bea;
  --pt-a-bg:#2f5bea;--pt-a-tx:#ffffff;
  --pt-a-tx2:#dfe7ff;
  --pt-z-bg:#e6f7f5;--pt-z-rand:#14b8a6;--pt-z-tx:#134e4a;--pt-z-tx2:#2e6f69;
  --pt-e-bg:#eaf6ef;--pt-e-rand:#22a05a;--pt-e-tx:#14532d;--pt-e-tx2:#3d7352;
  --pt-g-bg:#f3efff;--pt-g-tx:#3b1a7a;--pt-g-tx2:#6d4bb8;--pt-g-rand:#8b5cf6;
  --pt-u-bg:#ff8a1f;--pt-u-tx:#ffffff;--pt-u-tx2:#fff1e2;
  --pt-rot:#e5484d;--pt-gruen:#16a34a;--pt-gelb:#d97706;--pt-lila:#7c3aed;--pt-grau:#94a3b8;
}
html.pt-dunkel{
  --pt-bg:#0d121b;--pt-bg2:#111827;--pt-bg3:#1a2232;--pt-ln:rgba(255,255,255,.08);--pt-ln2:rgba(255,255,255,.035);
  --pt-tx:#e8edf5;--pt-tx2:#8b97ab;--pt-tx3:#5b6678;--pt-schatten:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --pt-akzent:#5b8cff;
  --pt-a-bg:#3866f2;--pt-a-tx:#ffffff;
  --pt-a-tx2:#dce5ff;
  --pt-z-bg:#0f2f2d;--pt-z-rand:#2dd4bf;--pt-z-tx:#d5fbf4;--pt-z-tx2:#94dcd2;
  --pt-e-bg:#11291c;--pt-e-rand:#22c55e;--pt-e-tx:#d3f7de;--pt-e-tx2:#93c9a5;
  --pt-g-bg:#251a3f;--pt-g-tx:#ede9fe;--pt-g-tx2:#c4b5fd;--pt-g-rand:#a78bfa;
  --pt-u-bg:#f47b16;--pt-u-tx:#ffffff;--pt-u-tx2:#ffeedd;
  --pt-rot:#ff5a5f;--pt-gruen:#34d399;--pt-gelb:#fbbf24;--pt-lila:#a78bfa;--pt-grau:#5b6678;
}

#plantafel{margin:6px 16px 20px;font:500 13px/1.35 "Segoe UI Variable Text","Segoe UI",system-ui,"PT Inter",sans-serif;color:var(--pt-tx);
  font-feature-settings:"tnum" 1}
#plantafel[hidden]{display:none}
#plantafel button,#plantafel input,#plantafel select{font-family:inherit}
.pt-rahmen{background:var(--pt-bg);border:1px solid var(--pt-ln);border-radius:18px;box-shadow:var(--pt-schatten);overflow:hidden;position:relative}

/* ------------------------------------------------------------------ Kopfleiste */
.pt-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--pt-ln);background:var(--pt-bg)}
.pt-marke{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.pt-marke i{font-style:normal;color:#e4262c}
.pt-marke small{font-size:10.5px;font-weight:600;color:var(--pt-tx2);letter-spacing:.08em;text-transform:uppercase}
.pt-seg{display:inline-flex;background:var(--pt-bg3);border-radius:10px;padding:3px;gap:2px}
.pt-seg button{border:0;background:none;color:var(--pt-tx2);font-weight:600;font-size:13px;height:28px;padding:0 12px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.pt-seg button:hover{color:var(--pt-tx)}
.pt-seg button.an{background:var(--pt-bg);color:var(--pt-tx);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pt-seg button em{font-style:normal;font-size:11px;font-weight:700;color:var(--pt-tx3)}
.pt-seg button.an em{color:var(--pt-akzent)}
.pt-tagwahl{display:inline-flex;align-items:center;gap:2px;background:var(--pt-bg3);border-radius:10px;padding:3px}
.pt-tagwahl b{min-width:150px;text-align:center;font-weight:700;font-size:13px}
.pt-tagwahl .heute{border:0;background:var(--pt-bg);color:var(--pt-tx);font-weight:600;font-size:12px;height:28px;padding:0 10px;border-radius:8px;cursor:pointer;margin-left:4px}
.pt-ik{border:0;background:none;color:var(--pt-tx2);width:28px;height:28px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.pt-ik:hover{background:var(--pt-bg);color:var(--pt-tx)}
.pt-ik svg,.pt-kn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pt-kn{border:1px solid var(--pt-ln);background:var(--pt-bg);color:var(--pt-tx);font-weight:600;font-size:13px;height:34px;padding:0 12px;border-radius:10px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pt-kn:hover{border-color:var(--pt-akzent);color:var(--pt-akzent)}
.pt-kn.an{background:var(--pt-tx);color:var(--pt-bg);border-color:var(--pt-tx)}
.pt-kn.haupt{background:var(--pt-akzent);border-color:var(--pt-akzent);color:#fff}
.pt-kn[disabled]{opacity:.5;cursor:default}
.pt-platz{flex:1}
.pt-leg{display:flex;gap:12px;flex-wrap:wrap;color:var(--pt-tx2);font-size:11.5px;font-weight:500}
.pt-leg span{display:inline-flex;align-items:center;gap:5px}
.pt-leg i{width:12px;height:12px;border-radius:4px;display:inline-block;box-sizing:border-box}
.pt-stand{display:inline-flex;align-items:center;gap:6px;color:var(--pt-tx2);font-size:11.5px;white-space:nowrap}
.pt-stand i{width:7px;height:7px;border-radius:50%;background:var(--pt-gruen);animation:pt-puls 2.4s infinite}
@keyframes pt-puls{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* Ansicht-Menü */
.pt-menue{position:absolute;z-index:40;background:var(--pt-bg);border:1px solid var(--pt-ln);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.35);
  padding:14px 16px;width:300px;color:var(--pt-tx)}
.pt-menue h4{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-tx2)}
.pt-menue label.regler{display:grid;grid-template-columns:62px 1fr 40px;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:8px 0}
.pt-menue label.regler span:last-child{color:var(--pt-tx2);font-size:11px;text-align:right}
.pt-menue input[type=range]{width:100%;accent-color:var(--pt-akzent)}
.pt-menue .zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:11px 0;font-size:13px;font-weight:600;cursor:pointer}
.pt-menue .zeile small{display:block;font-weight:500;color:var(--pt-tx2);font-size:11.5px}
.pt-menue hr{border:0;border-top:1px solid var(--pt-ln);margin:10px 0}
.pt-schalter{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:99px;background:var(--pt-bg3);position:relative;cursor:pointer;flex:none;border:1px solid var(--pt-ln);margin:0}
.pt-schalter::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.pt-schalter:checked{background:var(--pt-gruen);border-color:var(--pt-gruen)}
.pt-schalter:checked::after{left:18px}

/* ------------------------------------------------------------------ Körper */
.pt-koerper{display:grid;grid-template-columns:310px 1fr;height:min(74vh,1100px);resize:vertical;overflow:hidden;background:var(--pt-bg)}
.pt-koerper.ohneliste{grid-template-columns:1fr}.pt-koerper.ohneliste .pt-liste{display:none}

/* Liste links */
.pt-liste{border-right:1px solid var(--pt-ln);display:flex;flex-direction:column;min-height:0;background:var(--pt-bg2)}
.pt-lkopf{padding:14px 14px 8px}
.pt-lkopf h3{margin:0 0 10px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.pt-lkopf h3 em{font-style:normal;background:var(--pt-akzent);color:#fff;border-radius:99px;padding:1px 8px;font-size:11px}
.pt-filter{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.pt-filter button{border:1px solid var(--pt-ln);background:var(--pt-bg);color:var(--pt-tx2);font-size:11.5px;font-weight:600;height:26px;padding:0 9px;border-radius:99px;cursor:pointer}
.pt-filter button em{font-style:normal;margin-left:4px;color:var(--pt-tx3)}
.pt-filter button.an{background:var(--pt-tx);color:var(--pt-bg);border-color:var(--pt-tx)}
.pt-filter button.an em{color:inherit;opacity:.65}
.pt-suche{display:flex;gap:6px}
.pt-suche div{flex:1;position:relative}
.pt-suche svg{position:absolute;left:9px;top:8px;width:14px;height:14px;stroke:var(--pt-tx3);fill:none;stroke-width:2}
.pt-suche input,.pt-suche select{width:100%;box-sizing:border-box;height:30px;border:1px solid var(--pt-ln);border-radius:9px;background:var(--pt-bg);color:var(--pt-tx);
  font-size:12.5px;padding:0 8px}
.pt-suche input{padding-left:29px}
.pt-suche select{width:96px;flex:none}
.pt-litems{overflow:auto;padding:4px 10px 14px;flex:1}
.pt-item{position:relative;background:var(--pt-bg);border:1px solid var(--pt-ln);border-radius:12px;padding:9px 11px 9px 15px;margin:7px 0;cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.pt-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--pt-z-rand)}
.pt-item:hover{border-color:var(--pt-akzent);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.pt-item[draggable=true]{cursor:grab}
.pt-item[draggable=true]:active{cursor:grabbing}
.pt-item.zieht{opacity:.4}
.pt-item .z1{display:flex;align-items:center;gap:8px}
.pt-item .z1 b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.pt-item .z1 small{color:var(--pt-tx2);font-size:11.5px;font-weight:500}
.pt-item .z1 .pt-badge{margin-left:auto}
.pt-item .z2{font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-item .z3{color:var(--pt-tx2);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-item.storno::before{background:var(--pt-rot)}.pt-item.storno .z2{text-decoration:line-through;color:var(--pt-tx2)}
.pt-item.nullzeit::before{background:var(--pt-grau)}
.pt-item.abgelehnt::before{background:var(--pt-gelb)}
.pt-item.andertag::before{background:var(--pt-lila)}
.pt-badge{font-size:10.5px;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap;letter-spacing:.01em}
.pt-badge.offen{background:rgba(20,184,166,.15);color:var(--pt-z-rand)}
.pt-badge.storno{background:rgba(229,72,77,.15);color:var(--pt-rot)}
.pt-badge.nullzeit{background:rgba(148,163,184,.18);color:var(--pt-tx2)}
.pt-badge.abgelehnt{background:rgba(217,119,6,.15);color:var(--pt-gelb)}
.pt-badge.andertag{background:rgba(124,58,237,.14);color:var(--pt-lila)}
.pt-badge.lkw{background:rgba(47,91,234,.14);color:var(--pt-akzent)}
.pt-leer{color:var(--pt-tx2);text-align:center;padding:32px 10px;font-size:12.5px}
.pt-leer b{display:block;font-size:22px;margin-bottom:6px;color:var(--pt-gruen)}

/* ------------------------------------------------------------------ Tafel */
.pt-tafel{overflow:auto;position:relative;min-width:0;background:var(--pt-bg)}
.pt-tafel::-webkit-scrollbar{width:10px;height:10px}.pt-tafel::-webkit-scrollbar-thumb{background:var(--pt-bg3);border-radius:10px;border:2px solid var(--pt-bg)}
.pt-tafel::-webkit-scrollbar-corner{background:var(--pt-bg)}
.pt-gitter{display:grid;position:relative;min-height:100%}
.pt-ecke,.pt-sk{position:sticky;top:0;z-index:6;background:var(--pt-bg);border-bottom:1px solid var(--pt-ln);height:calc(var(--pt-fs) * var(--pt-kopfh));box-sizing:border-box}
.pt-ecke{left:0;z-index:8;border-right:1px solid var(--pt-ln)}
.pt-sk{padding:calc(var(--pt-fs) * 9px) 6px 6px;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pt-fs) * 6px);border-left:1px solid var(--pt-ln2);overflow:hidden}
/* Kennzeichen wie ein echtes Nummernschild */
.pt-schild{display:inline-flex;align-items:stretch;height:calc(var(--pt-fs) * 22px);border-radius:4px;overflow:hidden;background:#fbfbf8;color:#111;
  border:1.5px solid #222;font-weight:700;font-size:calc(var(--pt-fs) * 12.5px);letter-spacing:.03em;max-width:100%;box-sizing:border-box}
.pt-schild i{font-style:normal;background:#1d4fbf;color:#fff;font-size:calc(var(--pt-fs) * 7.5px);width:calc(var(--pt-fs) * 11px);display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:1px;flex:none}
.pt-schild span{padding:0 6px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.pt-sk.fremd .pt-schild{border-style:dashed}
.pt-sk .fahrer{display:flex;align-items:center;gap:5px;max-width:100%;font-size:calc(var(--pt-fs) * 11.5px);color:var(--pt-tx2);font-weight:500}
.pt-sk .fahrer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-sk .av{position:relative;width:calc(var(--pt-fs) * 18px);height:calc(var(--pt-fs) * 18px);border-radius:50%;background:var(--pt-bg3);color:var(--pt-tx);
  font-size:calc(var(--pt-fs) * 8.5px);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.pt-sk .av.app::after{content:"";position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;background:var(--pt-gruen);border:2px solid var(--pt-bg)}
.pt-sk .last{width:80%;height:4px;border-radius:99px;background:var(--pt-bg3);overflow:hidden}
.pt-sk .last i{display:block;height:100%;border-radius:99px;background:var(--pt-akzent)}
.pt-sk .last.voll i{background:var(--pt-gelb)}
.pt-sk.weg .fahrer{color:var(--pt-rot)}
.pt-sk.weg .pt-schild{opacity:.5}
.pt-sk .raus{position:absolute;top:4px;right:4px;border:0;background:var(--pt-bg3);color:var(--pt-tx2);cursor:pointer;width:20px;height:20px;border-radius:6px;
  opacity:0;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0}
.pt-sk:hover .raus{opacity:1}
.pt-sk .raus:hover{background:var(--pt-rot);color:#fff}
.pt-zeiten{position:sticky;left:0;z-index:5;background:var(--pt-bg);border-right:1px solid var(--pt-ln)}
.pt-zeiten div{height:var(--pt-h);box-sizing:border-box;text-align:right;padding:0 9px 0 0;position:relative;top:-.62em;
  font-size:calc(var(--pt-fs) * 12px);font-weight:700;color:var(--pt-tx2)}
.pt-zeiten div small{font-size:.75em;font-weight:500;color:var(--pt-tx3)}
.pt-zeiten div:first-child{visibility:hidden}
.pt-spalte{position:relative;border-left:1px solid var(--pt-ln2);
  background-image:linear-gradient(to bottom,var(--pt-ln) 0,var(--pt-ln) 1px,transparent 1px,transparent 50%,var(--pt-ln2) 50%,var(--pt-ln2) calc(50% + 1px),transparent calc(50% + 1px));
  background-size:100% var(--pt-h)}
.pt-spalte.alt{background-color:var(--pt-ln2)}
.pt-spalte.weg{background-color:transparent}
.pt-spalte.weg::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 9px,var(--pt-ln2) 9px 18px);pointer-events:none}
.pt-spalte.ziel{box-shadow:inset 0 0 0 2px var(--pt-z-rand);background-color:rgba(20,184,166,.12)}
.pt-jetzt{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--pt-rot);z-index:4;pointer-events:none;box-shadow:0 0 10px rgba(229,72,77,.55)}
.pt-jetzt b{position:absolute;left:4px;top:-10px;background:var(--pt-rot);color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;z-index:6}

/* ------------------------------------------------------------------ Kasten (Auftrag) */
.pt-k{position:absolute;box-sizing:border-box;border-radius:10px;overflow:hidden;cursor:pointer;z-index:2;font-size:calc(var(--pt-fs) * 12px);
  padding:calc(var(--pt-fs) * 5px) calc(var(--pt-fs) * 7px) 0;transition:box-shadow .15s}
.pt-k:hover{z-index:7;box-shadow:0 0 0 2px var(--pt-tx),0 10px 30px rgba(0,0,0,.35)!important}
.pt-k{border:1.5px solid transparent;--k2:inherit}
.pt-k.s50{background:var(--pt-a-bg);color:var(--pt-a-tx);border-color:var(--pt-a-bg);--k2:var(--pt-a-tx2)}
.pt-k.s40{background:var(--pt-z-bg);color:var(--pt-z-tx);border-style:dashed;border-color:var(--pt-z-rand);--k2:var(--pt-z-tx2)}
.pt-k.fertig{background:var(--pt-e-bg);color:var(--pt-e-tx);border-color:var(--pt-e-rand);--k2:var(--pt-e-tx2)}
.pt-k.hier{border-style:dashed;border-color:var(--pt-z-rand)}
.pt-k.spaet{box-shadow:0 0 0 2px var(--pt-rot),0 0 18px rgba(229,72,77,.5)}
.pt-k .k1{display:flex;align-items:center;gap:6px;min-width:0}
.pt-k .k1 b{font-size:1.18em;font-weight:700;letter-spacing:-.01em;flex:none}
.pt-k .lage{margin-left:auto;font-size:.82em;font-weight:700;border-radius:99px;padding:1px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pt-k .lage.ok{background:#dcfce7;color:#15803d}
.pt-k .lage.spaet{background:var(--pt-rot);color:#fff;animation:pt-blink 1.6s ease-in-out infinite}
.pt-k .lage.da{background:#ede9fe;color:#6d28d9}
.pt-k .lage.wartet{background:#fef3c7;color:#92400e}
.pt-k .lage.still{background:#4a6ff0;color:#fff;font-weight:600}
.pt-k.s40 .lage.still{background:#c9efea;color:#134e4a}.pt-k.fertig .lage.still{background:#cfeedd;color:#14532d}
html.pt-dunkel .pt-k.s40 .lage.still{background:#174641;color:#d5fbf4}html.pt-dunkel .pt-k.fertig .lage.still{background:#1b4029;color:#d3f7de}
@keyframes pt-blink{50%{opacity:.6}}
.pt-k .k2{font-weight:700;margin-top:calc(var(--pt-fs) * 3px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-k .k3,.pt-k .k4{font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--k2);margin-top:1px}
/* Fahrt zum Kunden: senkrechte Linie wandert von links nach rechts (rechts = angekommen), unten die Spur */
.pt-k .spur{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.pt-k .spur i{display:block;height:100%;background:#fff;transition:width 1.5s linear}
.pt-k .linie{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95) 35%);
  pointer-events:none;transition:left 1.5s linear;z-index:1}
.pt-k .linie svg{position:absolute;bottom:6px;left:50%;width:20px;height:13px;margin-left:-10px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.pt-k .k1,.pt-k .k2,.pt-k .k3,.pt-k .k4{position:relative;z-index:2}
.pt-k.s40 .spur{background:rgba(19,78,74,.12)}.pt-k.s40 .spur i{background:var(--pt-z-rand)}
.pt-k.s40 .linie{background:linear-gradient(to bottom,rgba(20,184,166,0),var(--pt-z-rand) 35%)}
.pt-k.angekommen .linie{left:calc(100% - 2px)!important}

/* ------------------------------------------------------------------ LKW verwalten */
.pt-pop{position:absolute;z-index:40;background:var(--pt-bg);color:var(--pt-tx);border:1px solid var(--pt-ln);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);padding:14px 16px;width:min(580px,92vw);max-height:72vh;overflow:auto}
.pt-pop h4{margin:4px 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pt-tx2)}
.pt-pop .reihe{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--pt-ln2)}
.pt-pop .reihe b{min-width:96px}
.pt-pop .reihe span{flex:1;color:var(--pt-tx2);font-size:12px}
.pt-pop select{flex:1;height:32px;border:1px solid var(--pt-ln);border-radius:9px;background:var(--pt-bg);color:var(--pt-tx)}
.pt-pop .klein{color:var(--pt-tx2);font-size:12px;margin-top:10px}

/* ------------------------------------------------------------------ Info-Fenster */
.pt-dlg-hg{position:fixed;inset:0;background:rgba(5,8,14,.55);backdrop-filter:blur(3px);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;
  font:500 13px/1.4 "Segoe UI Variable Text","Segoe UI",system-ui,"PT Inter",sans-serif}
.pt-dlg{background:var(--pt-bg);color:var(--pt-tx);border-radius:20px;width:min(760px,100%);max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.45);
  border:1px solid var(--pt-ln)}
.pt-dlg header{padding:18px 22px 16px;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--pt-ln)}
.pt-dlg header .art{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pt-tx2);margin-bottom:6px}
.pt-dlg header .art i{width:9px;height:9px;border-radius:50%;display:inline-block}
.pt-dlg header h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.pt-dlg header small{color:var(--pt-tx2);font-size:12.5px}
.pt-dlg header button{border:0;background:var(--pt-bg3);color:var(--pt-tx);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:15px;flex:none}
.pt-dlg .live{margin:16px 22px 0;padding:12px 14px;border-radius:14px;font-weight:700;font-size:14px}
.pt-dlg .live.ok{background:rgba(22,163,74,.12);color:var(--pt-gruen)}
.pt-dlg .live.spaet{background:rgba(229,72,77,.13);color:var(--pt-rot)}
.pt-dlg .live.da{background:rgba(124,58,237,.12);color:var(--pt-lila)}
.pt-dlg .live.wartet{background:rgba(217,119,6,.13);color:var(--pt-gelb)}
.pt-dlg .live.neutral{background:var(--pt-bg3);color:var(--pt-tx2)}
.pt-dlg .live small{display:block;font-weight:500;font-size:12px;opacity:.85;margin-top:2px}
.pt-dlg .live .balken{height:6px;border-radius:99px;background:rgba(127,127,127,.2);margin-top:10px;overflow:hidden}
.pt-dlg .live .balken i{display:block;height:100%;border-radius:99px;background:currentColor}
.pt-dlg .felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 22px;padding:10px 22px 4px}
.pt-dlg .feld{padding:9px 0;border-bottom:1px solid var(--pt-ln2)}
.pt-dlg .feld small{display:block;color:var(--pt-tx2);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.pt-dlg .feld div{font-weight:600}
.pt-dlg footer{padding:14px 22px 20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt-dlg footer .hinweis{color:var(--pt-tx2);font-size:12px}
.pt-hinweis{margin:10px 22px 0;padding:9px 12px;border-radius:12px;background:rgba(217,119,6,.13);color:var(--pt-gelb);font-size:12.5px;font-weight:600}
.pt-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:11px 18px;border-radius:14px;z-index:70;
  font:600 13px "Segoe UI Variable Text","Segoe UI",system-ui,"PT Inter",sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pt-unten{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ink-2);font-size:11px;font-weight:600;margin-top:14px;letter-spacing:.08em;text-transform:uppercase}
.pt-unten::before,.pt-unten::after{content:"";flex:1;height:1px;background:var(--rand)}
@media (max-width:900px){.pt-koerper{grid-template-columns:1fr;height:auto;resize:none}.pt-liste{max-height:320px;border-right:0;border-bottom:1px solid var(--pt-ln)}
  .pt-tafel{height:70vh}}

/* ------------------------------------------------------------------ Geplant (nur NP Trans) + oranger Pfeil = in Catkin zuweisen */
.pt-k.geplant{border:1.5px dashed var(--pt-g-rand)!important;box-shadow:0 0 0 1px rgba(139,92,246,.25),0 4px 14px rgba(139,92,246,.25)}
.pt-k.geplant.s40,.pt-k.geplant.fertig{background:var(--pt-g-bg);color:var(--pt-g-tx);--k2:var(--pt-g-tx2)}
/* unbestätigt (Catkin 20 vom Kunden, 30 geändert) = ORANGE, solange wir nicht bestätigt haben */
.pt-k.unbest{background:var(--pt-u-bg);color:var(--pt-u-tx);border-color:var(--pt-u-bg);--k2:var(--pt-u-tx2);box-shadow:0 2px 10px rgba(244,123,22,.35)}
.pt-k.unbest .lage.still{background:#fff;color:#c2410c}
.pt-k.unbest.geplant{background:var(--pt-u-bg);color:var(--pt-u-tx);--k2:var(--pt-u-tx2)}
.pt-k .pk-zuw{position:absolute;left:5px;bottom:7px;z-index:4;width:calc(var(--pt-fs) * 22px);height:calc(var(--pt-fs) * 22px);border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#f97316;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(249,115,22,.6);animation:pt-zuw 2s ease-in-out infinite}
.pt-k .pk-zuw svg{width:60%;height:60%;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pt-k .pk-zuw:hover{background:#ea580c;transform:scale(1.12);animation:none}
@keyframes pt-zuw{50%{box-shadow:0 0 0 5px rgba(249,115,22,0),0 2px 8px rgba(249,115,22,.6)}}
.pt-k.geplant .k4{padding-left:calc(var(--pt-fs) * 26px)}
.pt-k[draggable=true]{cursor:grab}
.pt-k.zieht{opacity:.35}
.pt-liste.ziel{box-shadow:inset 0 0 0 2px var(--pt-g-rand);background:rgba(139,92,246,.08)}
.pt-spalte.ziel{box-shadow:inset 0 0 0 2px var(--pt-g-rand);background-color:rgba(139,92,246,.1)}
.pt-item.unbest::before{background:#f47b16}
.pt-badge.unbest{background:#f47b16;color:#fff}
.pt-unbest{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;background:#f47b16;color:#fff;font-weight:700;font-size:12.5px;
  border:0;cursor:pointer;white-space:nowrap}
.pt-unbest.null{background:var(--pt-bg3);color:var(--pt-tx2);font-weight:600}
.pt-item.vorholung::before{background:#0ea5e9}
.pt-badge.vorholung{background:rgba(14,165,233,.15);color:#0284c7}
html.pt-dunkel .pt-badge.vorholung{color:#7dd3fc}

/* Haken am unbestätigten Auftrag: erscheint beim Darüberfahren, Klick = in Catkin bestätigen (wie in cTrans) */
.pk-ok{position:absolute;right:5px;bottom:6px;z-index:5;width:calc(var(--pt-fs) * 24px);height:calc(var(--pt-fs) * 24px);border-radius:50%;border:2px solid #fff;padding:0;
  cursor:pointer;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35);
  opacity:0;transform:scale(.7);transition:opacity .12s,transform .12s}
.pk-ok svg{width:62%;height:62%;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pt-k:hover .pk-ok,.pt-item:hover .pk-ok{opacity:1;transform:scale(1)}
.pk-ok:hover{background:#15803d;transform:scale(1.15)!important}
.pk-ok.laeuft{opacity:1;animation:pt-blink .8s infinite}
.pt-item .pk-ok{top:50%;bottom:auto;margin-top:-12px;right:10px}

/* Datumsleiste: Datum groß + KW-Auswahl + Mo–So mit Anzahl (orange = davon unbestätigt) + Kalender (Chef 01.10.: „Datum und KW einbauen“) */
.pt-datum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--pt-ln);background:var(--pt-bg2)}
.pt-dtitel{font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:290px;margin-right:6px}
.pt-dtitel span{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;color:#fff;background:var(--pt-akzent);border-radius:7px;padding:2px 8px;vertical-align:2px}
.pt-kw{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--pt-tx2)}
.pt-kw select{height:34px;border:1px solid var(--pt-ln);border-radius:10px;background:var(--pt-bg);color:var(--pt-tx);font-weight:600;font-size:13px;padding:0 8px;cursor:pointer}
.pt-woche{display:inline-flex;gap:4px;background:var(--pt-bg3);border-radius:12px;padding:3px}
.pt-woche button{border:0;background:none;color:var(--pt-tx2);cursor:pointer;border-radius:9px;padding:5px 11px;min-width:66px;display:flex;flex-direction:column;
  align-items:flex-start;gap:1px;text-align:left;position:relative;line-height:1.2}
.pt-woche button .wt{display:flex;align-items:baseline;gap:5px}
.pt-woche button b{font-size:13px;color:var(--pt-tx)}
.pt-woche button small{font-size:11px}
.pt-woche button em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--pt-tx);display:flex;align-items:center;gap:4px}
.pt-woche button em.ptl{color:var(--pt-tx3);font-weight:500}
.pt-woche button em i{font-style:normal;background:#f47b16;color:#fff;border-radius:99px;padding:0 6px;font-size:10.5px}
.pt-woche button:hover{background:var(--pt-bg)}
.pt-woche button.we b{color:var(--pt-tx2)}
.pt-woche button.heute::after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;border-radius:2px;background:var(--pt-rot)}
.pt-woche button.an{background:var(--pt-akzent);color:#fff}
.pt-woche button.an b,.pt-woche button.an em{color:#fff}
.pt-kal{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--pt-ln);border-radius:10px;background:var(--pt-bg);color:var(--pt-tx);cursor:pointer}
.pt-kal svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-kal input{border:0;background:none;color:var(--pt-tx);font:inherit;font-size:13px;font-weight:600;cursor:pointer;color-scheme:light}
html.pt-dunkel .pt-kal input{color-scheme:dark}
.pt-woche button em,.pt-woche button .wt{flex:0 0 auto;height:auto;min-height:0}
.pt-woche{align-items:stretch}
.pt-woche button{display:block;height:auto}
.pt-woche button em{display:flex;margin-top:2px}

/* Farben nach Chef 01.10.: unbestätigt ORANGE · bestätigt GRIECHISCH BLAU · an Fahrer gesendet DUNKELBLAU · ausgedruckt 👍 weiß · abgearbeitet GRÜN */
:root{--pt-z-bg:#0d5eaf;--pt-z-tx:#ffffff;--pt-z-tx2:#d3e5fa;--pt-z-rand:#0d5eaf;
  --pt-a-bg:#0b1f5c;--pt-a-tx:#ffffff;--pt-a-tx2:#c9d4f5;
  --pt-e-bg:#1f9d55;--pt-e-tx:#ffffff;--pt-e-tx2:#dcf5e6;--pt-e-rand:#1f9d55}
html.pt-dunkel{--pt-z-bg:#0d5eaf;--pt-z-tx:#ffffff;--pt-z-tx2:#d3e5fa;--pt-z-rand:#3d86d4;
  --pt-a-bg:#0e2670;--pt-a-tx:#ffffff;--pt-a-tx2:#c9d4f5;
  --pt-e-bg:#1f9d55;--pt-e-tx:#ffffff;--pt-e-tx2:#dcf5e6;--pt-e-rand:#2fbf6c}
.pt-k.s40{border-style:solid;border-color:var(--pt-z-rand)}
.pt-k.s40 .lage.still{background:#2b78c9;color:#fff}
.pt-k.s50{border-color:#3554c4;box-shadow:0 2px 10px rgba(11,31,92,.45)}
html.pt-dunkel .pt-k.s50{border-color:#4a6be0}
.pt-k.fertig .lage.still,html.pt-dunkel .pt-k.fertig .lage.still{background:#fff;color:#15803d}
.pt-k.s40 .spur,.pt-k.s50 .spur{background:rgba(255,255,255,.22)}
.pt-k.s40 .spur i{background:#fff}
.pt-k.s40 .linie{background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95) 35%)}
.pk-daumen{display:inline-flex;width:calc(var(--pt-fs) * 17px);height:calc(var(--pt-fs) * 17px);flex:none}
.pk-daumen svg{width:100%;height:100%}
.pt-leg i svg{display:block}

/* Werkzeuge oben im Kasten beim Darüberfahren: Frachtbrief · Bleistift (Notiz) — Chef 01.10. */
.pk-werkzeug{position:absolute;top:3px;right:3px;z-index:6;display:flex;gap:3px;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s;pointer-events:none}
.pt-k:hover .pk-werkzeug{opacity:1;transform:none;pointer-events:auto}
.pk-werkzeug button{width:calc(var(--pt-fs) * 24px);height:calc(var(--pt-fs) * 24px);border-radius:7px;border:0;padding:0;cursor:pointer;background:#fff;color:#0f172a;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pk-werkzeug button:hover{background:#0f172a;color:#fff}
.pk-werkzeug svg{width:62%;height:62%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* mit Notiz: ROSA (Status bleibt als farbiger Streifen links sichtbar) */
.pt-k.notiz{background:#f9a8d4!important;color:#500724!important;--k2:#831843!important;border-left-width:5px!important;border-style:solid!important}
.pt-k.notiz.unbest{border-left-color:#f47b16!important}.pt-k.notiz.s40{border-left-color:#0d5eaf!important}
.pt-k.notiz.s50{border-left-color:#0b1f5c!important}.pt-k.notiz.fertig{border-left-color:#1f9d55!important}
.pt-k.notiz .lage.still{background:#fff;color:#831843}
.pt-k.notiz .pk-daumen svg path{fill:#831843}
.pt-dlg textarea{width:100%;box-sizing:border-box;border:1px solid var(--pt-ln);border-radius:12px;background:var(--pt-bg2);color:var(--pt-tx);font:inherit;font-size:14px;padding:10px 12px;resize:vertical}
.pt-dlg textarea:focus{outline:2px solid #f472b6;border-color:transparent}
.pt-dlg .hinweis{color:var(--pt-tx2);font-size:12px}
.pt-kn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* „Frachtbrief vertauscht“: kleineres ⇄ neben dem FB-Symbol; gesetzt = rote Marke im Kasten (immer sichtbar) */
.pk-werkzeug button.klein{width:calc(var(--pt-fs) * 18px);height:calc(var(--pt-fs) * 18px);align-self:center;border-radius:6px}
.pk-werkzeug button.klein.an{background:#dc2626;color:#fff}
.pk-tausch{position:relative;z-index:3;display:inline-flex;align-items:center;gap:3px;margin:0 0 2px;padding:1px 6px;border-radius:5px;background:#dc2626;color:#fff;
  font-size:.8em;font-weight:800;letter-spacing:.02em}
.pk-tausch svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pt-k:has(.pk-tausch){box-shadow:0 0 0 2px #dc2626}

/* Kräftig wie cTrans (Chef 01.10.: „Farben etwas matt als in cTrans“) — gemessen im cTrans-Bild:
 * Grün #20c028 · Blau #2830d0 · Rosa #f8a8a8 · Orange #e87808. Griechisch Blau entsprechend leuchtend. */
:root,html.pt-dunkel{
  --pt-z-bg:#1668e3;--pt-z-tx:#ffffff;--pt-z-tx2:#e2edff;--pt-z-rand:#1668e3;
  --pt-a-bg:#2830d0;--pt-a-tx:#ffffff;--pt-a-tx2:#e0e3ff;
  --pt-e-bg:#20c028;--pt-e-tx:#ffffff;--pt-e-tx2:#eaffea;--pt-e-rand:#20c028;
  --pt-u-bg:#ee7a0a;--pt-u-tx:#ffffff;--pt-u-tx2:#fff3e6}
.pt-k.s40 .lage.still{background:#ffffff;color:#1668e3}
.pt-k.s50 .lage.still{background:#ffffff;color:#2830d0}
.pt-k.s50{border-color:#2830d0;box-shadow:0 2px 12px rgba(40,48,208,.5)}
html.pt-dunkel .pt-k.s50{border-color:#5a61ff}
.pt-k.fertig{text-shadow:0 1px 1px rgba(0,0,0,.18)}
.pt-k.fertig .lage.still,html.pt-dunkel .pt-k.fertig .lage.still{background:#fff;color:#128a18}
.pt-k.unbest{box-shadow:0 2px 12px rgba(238,122,10,.5)}
.pt-k.notiz{background:#f8a8a8!important;color:#4a0a14!important;--k2:#7a1d2c!important}
.pt-k.notiz .lage.still{color:#7a1d2c}
.pt-item.unbest::before,.pt-badge.unbest{background:#ee7a0a}

/* „ganz etwas dunkler“ (Chef 01.10.) — alle Kastenfarben ca. 10 % dunkler als die cTrans-Messung */
:root,html.pt-dunkel{
  --pt-z-bg:#135cc9;--pt-z-rand:#135cc9;
  --pt-a-bg:#2329b8;
  --pt-e-bg:#1caa24;--pt-e-rand:#1caa24;
  --pt-u-bg:#d96d06}
.pt-k.s40 .lage.still{color:#135cc9}
.pt-k.s50{border-color:#2329b8}
.pt-k.s50 .lage.still{color:#2329b8}
.pt-k.fertig .lage.still,html.pt-dunkel .pt-k.fertig .lage.still{color:#117a17}
.pt-k.notiz{background:#ee9a9a!important}
.pt-item.unbest::before,.pt-badge.unbest{background:#d96d06}

/* Liste links: Aufträge ohne LKW gefüllt in der Tafel-Farbe (bestätigt griechisch blau / unbestätigt orange) */
.pt-item.voll{border-color:transparent}
.pt-item.voll::before{display:none}
.pt-item.best.voll{background:var(--pt-z-bg);color:#fff}
.pt-item.unbest.voll{background:var(--pt-u-bg);color:#fff}
.pt-item.voll .z1 small,.pt-item.voll .z3{color:rgba(255,255,255,.88)}
.pt-item.voll .pt-badge{background:#fff}
.pt-item.best.voll .pt-badge{color:var(--pt-z-bg)}
.pt-item.unbest.voll .pt-badge{color:var(--pt-u-bg)}
.pt-item.voll:hover{border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.pt-item.voll .pk-ok{border-color:#fff}

/* Geplant (verschoben, noch nicht in Catkin) = HELLBLAU wie bestätigt statt lila (Chef 01.10.) — erkennbar am gestrichelten weißen Rand + orangem Pfeil */
:root,html.pt-dunkel{--pt-g-bg:var(--pt-z-bg);--pt-g-tx:#fff;--pt-g-tx2:var(--pt-z-tx2);--pt-g-rand:#ffffff}
.pt-k.geplant{border:2px dashed #fff!important;box-shadow:0 0 0 1px var(--pt-z-bg),0 4px 14px rgba(19,92,201,.45)}
.pt-k.geplant.s40,.pt-k.geplant.fertig,.pt-k.geplant.s50{background:var(--pt-z-bg);color:#fff;--k2:var(--pt-z-tx2)}
.pt-k.geplant .lage.still{background:#fff;color:#135cc9}
.pt-liste.ziel{box-shadow:inset 0 0 0 2px var(--pt-z-bg);background:rgba(19,92,201,.1)}
.pt-spalte.ziel{box-shadow:inset 0 0 0 2px var(--pt-z-bg);background-color:rgba(19,92,201,.14)}

/* „Schrift schärfer, Farben gleich“ (Chef 01.10.): reinweiß statt getönt, kräftiger, etwas größer — ohne Schatten (der macht Windows-Schrift weich) */
.pt-k{font-size:calc(var(--pt-fs) * 13px);--k2:#ffffff!important;text-shadow:none!important}
.pt-k.notiz{--k2:#3b0712!important}
.pt-k .k1 b{font-weight:800;font-size:1.2em}
.pt-k .k2{font-weight:800}
.pt-k .k3,.pt-k .k4{font-weight:600;font-size:.94em}
.pt-k .lage{font-weight:800}
.pt-sk .fahrer{font-weight:600;color:var(--pt-tx)}
.pt-schild{font-weight:800}
.pt-zeiten div{font-weight:800;color:var(--pt-tx)}
.pt-item .z1 b,.pt-item .z2{font-weight:800}
.pt-item .z1 small,.pt-item .z3{font-weight:600}
.pt-item.voll .z1 small,.pt-item.voll .z3{color:#fff}

/* Scharfe Schrift unter Windows (ClearType) in den Kästen: KEINE Durchsichtigkeits-/Verschiebe-Animationen in der Tafel —
 * Chrome legt sonst eigene Grafik-Ebenen an und zeichnet die Schrift darüber nur noch weich (Chef 01.10.: „glänzend scharfe Schrift“). */
.pt-k .lage.spaet{animation:pt-blink-farbe 1.6s steps(1) infinite}
@keyframes pt-blink-farbe{50%{background:#9f1d21}}
.pt-k .pk-zuw{animation:none}
.pk-werkzeug{opacity:1;transform:none;transition:none;visibility:hidden}
.pt-k:hover .pk-werkzeug{visibility:visible}
.pk-ok{opacity:1;transform:none;transition:none;visibility:hidden}
.pt-k:hover .pk-ok,.pt-item:hover .pk-ok,.pk-ok.laeuft{visibility:visible}
.pk-ok.laeuft{animation:none;background:#117a17}
.pk-ok:hover{transform:none!important}
.pk-zuw:hover{transform:none!important}
.pt-k .spur i,.pt-k .linie{transition:none}
.pt-k,.pt-k *{-webkit-font-smoothing:auto;text-rendering:optimizeLegibility}

/* Schrift in den Kästen WEISS mit Glanz, scharf (Chef 01.10.: „nein weiß, soll Glanz sein, ist etwas verschwommen“):
 * klassische „Segoe UI“ (gehintet, unter Windows schärfer als „Variable“), kein negativer Buchstabenabstand (halbe Pixel = weich),
 * feine dunkle Kante unter der Schrift → Weiß steht klar auf dem Farbgrund. Farben unverändert. */
.pt-k{font-family:"Segoe UI",system-ui,"PT Inter",sans-serif;color:#fff!important;--k2:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.45)!important;letter-spacing:0;text-rendering:auto}
.pt-k .k1 b{letter-spacing:0;font-weight:700;font-size:1.2em}
.pt-k .k2{font-weight:700}
.pt-k .k3,.pt-k .k4{font-weight:600}
.pt-k .lage{text-shadow:none!important}
.pt-k.notiz{color:#3b0712!important;--k2:#3b0712!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important}
.pt-item.voll,.pt-item.voll .z1 small,.pt-item.voll .z3{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.pt-item.voll .pt-badge{text-shadow:none}

/* ------------------------------------------------------------------ Monitor unter NP Trans (Chef 01.10.: „beste Übersicht“) */
.mkopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.mtitel{font-size:1.05rem}.mtitel b{font-size:1.15rem;margin-right:4px}
.mkopf .rechts{margin-left:auto}
.mkpi{display:grid;grid-template-columns:repeat(9,minmax(110px,1fr));gap:8px;margin:0 0 12px}
.mkpi button{border:1px solid var(--rand);background:var(--surface);color:var(--ink);border-radius:14px;padding:10px 12px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;font:inherit;border-left:5px solid #94a3b8;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mkpi button b{font-size:1.7rem;line-height:1.05;font-weight:800;font-variant-numeric:tabular-nums}
.mkpi button span{font-size:.8rem;color:var(--ink-2);font-weight:600}
.mkpi button.rot{border-left-color:#dc2626}.mkpi button.rot b{color:#dc2626}
.mkpi button.blau{border-left-color:#135cc9}.mkpi button.blau b{color:#135cc9}
.mkpi button.lila{border-left-color:#7c3aed}.mkpi button.lila b{color:#7c3aed}
.mkpi button.gelb{border-left-color:#d97706}.mkpi button.gelb b{color:#b45309}
.mkpi button.gruen{border-left-color:#1caa24}.mkpi button.gruen b{color:#15801c}
.mkpi button.null{opacity:.55}.mkpi button.null b{color:var(--ink-2)}
.mkpi button.an{outline:3px solid var(--ink);outline-offset:-1px;opacity:1}
.mkpi button:hover{box-shadow:0 4px 14px rgba(0,0,0,.12)}
@media (max-width:1400px){.mkpi{grid-template-columns:repeat(5,1fr)}}
.mkarte{padding:2px 8px 6px;overflow-x:auto}
.mon tr.mab td{padding:14px 8px 8px;border-bottom:2px solid var(--rand);background:var(--surface);font-size:1rem}
.mon tr.mab b{font-size:1.02rem}.mon tr.mab em{font-style:normal;font-weight:800;background:var(--plane);border-radius:99px;padding:1px 9px;margin:0 6px;font-size:.85rem}
.mon tr.mab span{color:var(--ink-2);font-size:.8rem}
.mon tr.mab.aktion td{box-shadow:inset 5px 0 0 #dc2626}.mon tr.mab.aktion b{color:#dc2626}
.mon tr.mab.live td{box-shadow:inset 5px 0 0 #135cc9}.mon tr.mab.live b{color:#135cc9}
.mon tr.mab.geplant td{box-shadow:inset 5px 0 0 #94a3b8}
.mon tr.mab.erledigt td{box-shadow:inset 5px 0 0 #1caa24}.mon tr.mab.erledigt b{color:#15801c}
.mon tr.mab .kn{margin-left:8px;padding:3px 9px;font-size:.78rem}
.mgrund{display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;border-radius:6px;padding:1px 7px;margin:3px 4px 0 0;white-space:nowrap}
.mgrund.rot{background:#fee2e2;color:#b91c1c}.mgrund.blau{background:#dbeafe;color:#1d4ed8}.mgrund.gelb{background:#fef3c7;color:#92400e}
.mleer{text-align:center;color:var(--ink-2);padding:28px 8px}
#reiter_oben{margin:10px 16px 0}#reiter_oben[hidden]{display:none}#reiter_oben .reiter{margin:0}
body.ntrans main{max-width:none!important;margin:0 16px!important}

/* Joker + anklickbare Überzeit-Marke in der N-Trans-Übersicht */
.mon .kn.joker{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:700;padding:4px 10px;font-size:.8rem}
.mon .kn.joker:hover{background:#6d28d9}
button.mgrund.klickbar{border:0;cursor:pointer;font-family:inherit}
button.mgrund.klickbar:hover{background:#dc2626;color:#fff}

/* Chef 04.10.: Catkin 30 = Kunde hat eine Änderung geschickt → ROT mit Warndreieck wie in cTrans (20 unbestätigt bleibt orange) */
:root{--pt-r-bg:#c81e1e}
.pt-k.unbest.geaendert,.pt-k.unbest.geaendert.geplant{background:var(--pt-r-bg);border-color:var(--pt-r-bg);box-shadow:0 2px 12px rgba(200,30,30,.5)}
.pt-k.unbest.geaendert .lage.still{color:#b91c1c}
.pt-k.notiz.unbest.geaendert{border-left-color:var(--pt-r-bg)!important}
.pt-item.unbest.geaendert::before{background:var(--pt-r-bg)}
.pt-item.unbest.voll.geaendert{background:var(--pt-r-bg)}
.pt-item.unbest.voll.geaendert .pt-badge{color:var(--pt-r-bg)}
.pt-badge.unbest.geaendert{background:var(--pt-r-bg)}
.pt-item.voll.geaendert .pt-badge.unbest.geaendert{background:#fff;color:var(--pt-r-bg)}
.pt-dreieck{display:inline-flex;align-items:center;justify-content:center;width:17px;height:15px;margin-right:4px;background:#ffd400;color:#000;
  clip-path:polygon(50% 0,100% 100%,0 100%);font-size:10px;font-weight:900;line-height:1;padding-top:5px;text-shadow:none;vertical-align:-2px;flex:0 0 auto}
.pt-unbest-rot{background:var(--pt-r-bg);color:#fff;border-radius:99px;padding:2px 9px;margin-left:6px}

/* ULTRA SCHARF (Chef 04.10.: „Kästen etwas verschwommen, Schrift wie zu wenig Pixel — mach alles in Ultra HD“):
 * klassische „Segoe UI“ (unter Windows mit ClearType gehintet) überall statt „Variable“/Webschrift, nur echte Schnitte 400/600/700
 * (800/900 gibt es in Segoe UI nicht → Chrome macht künstlich fett = matschig), KEIN Schatten unter Schrift, kein Weichzeichner,
 * Kästen/Spalten/Höhen in ganzen Pixeln (JS). Farben unverändert. */
#plantafel,.pt-pop,.pt-dlg,.pt-toast{font-family:"Segoe UI",Arial,"PT Inter",sans-serif!important;-webkit-font-smoothing:auto;text-rendering:optimizeSpeed;
  font-feature-settings:normal;font-variant-numeric:tabular-nums}
#plantafel *{text-shadow:none!important;letter-spacing:0!important}
#plantafel [style*="font-weight:800"],#plantafel b,#plantafel strong{font-weight:700}
.pt-marke,.pt-k .k1 b,.pt-k .k2,.pt-k .lage,.pt-schild,.pt-zeiten div,.pt-item .z1 b,.pt-item .z2,.pt-unbest,.pt-badge,.pt-woche button{font-weight:700!important}
.pt-k .k3,.pt-k .k4,.pt-sk .fahrer,.pt-item .z1 small,.pt-leg{font-weight:600!important}
.pt-k,.pt-k *{text-rendering:optimizeSpeed;-webkit-font-smoothing:auto}
.pt-k .linie svg{filter:none}
.pt-dlg-hg{backdrop-filter:none}
html.pt-dunkel{--pt-tx2:#aab4c5;--pt-tx3:#7c879a}
/* … und die N-Trans-Übersicht unter der Tafel (nur Reiter N Trans, Monitor bleibt unberührt) */
body.ntrans{font-family:"Segoe UI",Arial,sans-serif;text-rendering:optimizeSpeed}
body.ntrans *{text-shadow:none!important}
body.ntrans .mkpi button b,body.ntrans .mon tr.mab em,body.ntrans .mon b{font-weight:700}

/* KÄSTEN ULTRA SCHARF (Chef 04.10.: „Schrift in den Kästen und die Kästen selbst in Ultra HD“):
 * Rand 1 px statt 1,5 px (halbe Pixel = verschwommene Kante), Ecken 4 px, KEIN Leuchten/Weichschatten um die Kästen,
 * Schrift 14 px, Zeilenhöhen in ganzen Pixeln, Abstände ganz. Farben unverändert. */
.pt-k{border-width:1px!important;border-radius:4px;box-shadow:none!important;transition:none;
  font-size:calc(var(--pt-fs) * 14px);padding:5px 7px 0;line-height:18px}
.pt-k.notiz{border-left-width:5px!important}
.pt-k .k1{line-height:20px;height:20px}
.pt-k .k1 b{font-size:15px;font-weight:700!important}
.pt-k .k2{font-size:14px;line-height:18px;margin-top:2px;font-weight:700!important}
.pt-k .k3,.pt-k .k4{font-size:13px;line-height:17px;margin-top:0;font-weight:600!important}
.pt-k .lage{font-size:11px;line-height:16px;padding:0 6px;border-radius:3px}
/* Ränder/Markierungen als harte Linie statt Leuchten */
.pt-k:hover{box-shadow:inset 0 0 0 2px #fff!important}
.pt-k.spaet{box-shadow:inset 0 0 0 2px var(--pt-rot)!important}
.pt-k:has(.pk-tausch){box-shadow:inset 0 0 0 2px #dc2626!important}
.pt-k.geplant{border:1px dashed #fff!important}
.pt-k .linie{background:#fff}
/* Schrift-Regler bleibt wirksam, aber auf ganze Pixel gerundet */
.pt-k{font-size:round(calc(var(--pt-fs) * 14px),1px);line-height:round(calc(var(--pt-fs) * 18px),1px)}
.pt-k .k1{line-height:round(calc(var(--pt-fs) * 20px),1px);height:round(calc(var(--pt-fs) * 20px),1px)}
.pt-k .k1 b{font-size:round(calc(var(--pt-fs) * 15px),1px)}
.pt-k .k2{font-size:round(calc(var(--pt-fs) * 14px),1px);line-height:round(calc(var(--pt-fs) * 18px),1px)}
.pt-k .k3,.pt-k .k4{font-size:round(calc(var(--pt-fs) * 13px),1px);line-height:round(calc(var(--pt-fs) * 17px),1px)}
.pt-k .lage{font-size:round(calc(var(--pt-fs) * 11px),1px);line-height:round(calc(var(--pt-fs) * 16px),1px)}
/* Firma + Ort im Kasten GANZ (Chef 04.10.): umbrechen statt „…“, je höchstens 2 Zeilen; Referenz unten fällt weg, wenn kein Platz */
.pt-k .k2,.pt-k .k3{white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* … Firma bis 3 Zeilen, Ort bis 2, deutsche Silbentrennung statt Trennen mitten im Wort */
.pt-k{padding-left:6px;padding-right:5px}
.pt-k .k2,.pt-k .k3{overflow-wrap:break-word;word-break:normal;hyphens:auto;-webkit-hyphens:auto}
.pt-k .k2{-webkit-line-clamp:3;font-size:round(calc(var(--pt-fs) * 13px),1px);line-height:round(calc(var(--pt-fs) * 16px),1px)}
.pt-k .k3{-webkit-line-clamp:2;font-size:round(calc(var(--pt-fs) * 12px),1px);line-height:round(calc(var(--pt-fs) * 15px),1px)}
/* Reiter N Trans: Karte rechts NEBEN der Übersicht wie im Monitor (Chef 04.10.) — Liste macht rechts Platz, solange die Karte offen ist */
body.ntrans:has(#seite.auf) main{margin-right:calc(max(560px, 100vw - 1540px) + 16px)!important}
@media (max-width:2100px){body.ntrans:has(#seite.auf) main{margin-right:calc(50vw + 16px)!important}}
@media (max-width:1100px){body.ntrans:has(#seite.auf) main{margin-right:16px!important}}
body.ntrans #seite{box-shadow:none;border-top:1px solid var(--rand)}

/* Strecke im Info-Fenster (Chef 04.10.): Karte Terminal → Kunde → Rückgabe, km + Zeit, Bahn-Versand aus Catkin */
.pt-strecke{margin:6px 22px 4px;border:1px solid var(--pt-ln);border-radius:12px;overflow:hidden;background:var(--pt-bg2)}
.pts-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:10px 14px 4px}
.pts-kopf>b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pt-tx2)}
.pts-zahl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pts-gross{font-size:22px;font-weight:700;color:var(--pt-tx)}
.pts-klein{font-size:12px;color:var(--pt-tx2);font-weight:600}
.pts-zug{padding:2px 14px 8px;font-size:14px}
.pts-karte{height:300px;border-top:1px solid var(--pt-ln);border-bottom:1px solid var(--pt-ln);background:#e8ecf2}
.pts-stopps{padding:8px 14px 12px}
.pts-stopp{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.pts-stopp i{flex:none;width:22px;height:22px;border-radius:50%;background:#2f8cff;color:#fff;font-style:normal;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.pts-stopp.haupt i{background:#16a34a}
.pts-weg{margin-left:32px;font-size:12px;font-weight:700;color:var(--pt-tx2);padding:1px 0}
.pts-marke{background:#2f8cff;color:#fff;font:700 12px/1 "Segoe UI",Arial,sans-serif;padding:4px 7px;border-radius:12px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.pts-marke.kunde{background:#16a34a}

/* Gefahrgut (ADR) – kleine orange Warntafel unten rechts im Kasten (05.10.2026) */
.pk-adr{position:absolute;right:5px;bottom:5px;z-index:4;display:flex;flex-direction:column;min-width:calc(var(--pt-fs) * 30px);
  background:#f28c00;border:1.5px solid #111;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:auto}
.pk-adr b{display:block;padding:0 3px;font:700 calc(var(--pt-fs) * 9.5px)/1.25 Arial,Helvetica,sans-serif;color:#111;text-align:center;letter-spacing:.02em}
.pk-adr b+b{border-top:1.2px solid #111}
.pk-adr.eins b{padding:1px 4px}
.pt-k:hover .pk-adr{opacity:.25}

/* Container-Foto im Info-Fenster (05.10.) */
.pt-cfoto{display:inline-block;vertical-align:middle;cursor:zoom-in}
.pt-cfoto img{height:64px;max-width:150px;object-fit:cover;border-radius:4px;border:1px solid var(--pt-rand,#888);display:block}

/* 06.10. Chef: „Monitor: links die Autos, rechts die Karte – links sehe ich nur bis Joker“.
   Unter 2100 px Bildschirmbreite ist die Karte 50 % breit und lag ÜBER der rechten Hälfte der Liste (Liste 1500 px fest).
   Jetzt macht die Liste Platz (nur Reiter Monitor, nur bei offener Karte) und rückt zusammen, damit alle Spalten bis „Stand“ sichtbar sind. */
@media (min-width:1101px) and (max-width:2100px){
 body.breit:not(.ntrans):has(#seite.auf) main:not(:has(.tpgrid)){max-width:none;margin-right:calc(50vw + 16px)}
}
body.breit:not(.ntrans):has(#seite.auf) main .mon{font-size:.88rem}
body.breit:not(.ntrans):has(#seite.auf) main .mon th,body.breit:not(.ntrans):has(#seite.auf) main .mon td{padding:5px 5px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .k b{white-space:normal;max-width:220px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .k span,body.breit:not(.ntrans):has(#seite.auf) main .mon .l span{max-width:220px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .sym{width:32px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .sym svg{width:24px;height:24px;padding:3px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .fbalken{max-width:240px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .fbspur{min-width:70px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .fbl{max-width:60px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .mini{height:36px;max-width:70px}
body.breit:not(.ntrans):has(#seite.auf) main .mon .st,body.breit:not(.ntrans):has(#seite.auf) main .mon .uzw,
body.breit:not(.ntrans):has(#seite.auf) main .mon .virt{white-space:normal}

/* 06.10. Schieber zwischen Liste und Karte (selbst einstellbar, plantafel.js unten) */
.np-schieber{position:absolute;left:0;top:0;bottom:0;width:10px;cursor:col-resize;z-index:40;background:transparent}
.np-schieber::after{content:"";position:absolute;left:3px;top:50%;width:4px;height:56px;margin-top:-28px;border-radius:3px;background:#94a3b8}
.np-schieber:hover{background:rgba(37,99,235,.18)}.np-schieber:hover::after,body.np-zieht .np-schieber::after{background:#2563eb}
body.np-zieht,body.np-zieht *{user-select:none!important;cursor:col-resize!important}
@media (min-width:1101px){
 html.np-seite-eigen #seite{width:var(--np-seite)!important;min-width:0!important}
 html.np-seite-eigen body.breit:not(.ntrans):has(#seite.auf) main:not(:has(.tpgrid)){max-width:none!important;margin-right:calc(var(--np-seite) + 16px)!important}
 html.np-seite-eigen body.ntrans:has(#seite.auf) main{margin-right:calc(var(--np-seite) + 16px)!important}
}
.np-ecke{position:absolute;left:0;bottom:0;width:30px;height:30px;z-index:41;cursor:ew-resize;display:flex;align-items:center;justify-content:center;
 background:#2563eb;color:#fff;border-radius:0 8px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.np-ecke:hover,body.np-zieht .np-ecke{background:#1d4ed8}
@media (max-width:1100px){.np-schieber,.np-ecke{display:none}}
/* 06.10. Liste kleiner/größer (− / + an der Karten-Ecke) — zoom wirkt auf die ganze Liste inkl. Symbole/Fotos */
html.np-liste-eigen body.breit:not(.ntrans) main:not(:has(.tpgrid)) .mon,
html.np-liste-eigen body.ntrans main .mon{zoom:var(--np-liste)}
.np-lg{position:absolute;left:36px;bottom:3px;z-index:41;display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:8px;
 background:rgba(255,255,255,.95);color:#1d1d1b;font:600 12px "Segoe UI",system-ui,sans-serif;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.np-lg span{color:#555;margin-right:2px}
.np-lg button{width:24px;height:22px;border:1px solid #2563eb;border-radius:5px;background:#2563eb;color:#fff;font:700 15px/1 system-ui;cursor:pointer;padding:0}
.np-lg button:hover{background:#1d4ed8}
.np-lg b{min-width:42px;text-align:center;cursor:pointer}
@media (max-width:1100px){.np-lg{display:none}}

/* 06.10. Chef: „Container-Foto steht auf dem FB drauf – mach es daneben“: Zelle „Container · FB“ nicht umbrechen,
   Container-Foto · Knopf · FB-Foto · ✓ stehen nebeneinander in einer Reihe */
.mon td:has(> .cfoto){white-space:nowrap}
.mon td:has(> .cfoto) > *{vertical-align:middle}
.mon td:has(> .cfoto) > .mini{margin-left:4px}
/* 06.10. − / + nach OBEN in die Kopfleiste der Karte (unten links sah es der Chef nicht), größer; Eckgriff jetzt oben links */
.np-lg{position:static;padding:4px 8px;gap:6px;font-size:14px;background:#eef4fc;border:1px solid #2563eb;box-shadow:none;color:#1d1d1b}
.np-lg button{width:30px;height:28px;font-size:18px}
.np-lg b{min-width:48px}
.np-lg-griff{cursor:ew-resize;font-size:18px;color:#2563eb!important;padding:0 4px;user-select:none;touch-action:none}
.np-ecke{bottom:auto;top:0;border-radius:0 0 8px 0}
#seite>.skopf:first-of-type{padding-left:40px}

/* N-Trans-Übersicht KOMPAKT (Chef 08.10.: „Übersicht ist nicht so gut“): eine Zeile je Auftrag, Farbstreifen = Zustand,
 * Abschnitte als farbige Bänder, Probleme oben. Gilt nur für table.nt2 (Reiter N Trans), der Monitor bleibt unberührt. */
.mon.nt2{border-collapse:separate;border-spacing:0;width:100%}
.mon.nt2 th{padding:4px 8px;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em!important}
.mon.nt2 td{padding:5px 8px;line-height:1.3;vertical-align:middle;border-bottom:1px solid var(--rand)}
.mon.nt2 th.cb,.mon.nt2 td.cb{width:26px;padding-left:12px;padding-right:2px}
.mon.nt2 input[type=checkbox]{width:17px;height:17px}
.mon.nt2 tr.z{--st:#cbd5e1}
.mon.nt2 tr.z td:first-child{box-shadow:inset 5px 0 0 var(--st)}
.mon.nt2 tr.s-aktion.rot{--st:#dc2626}.mon.nt2 tr.s-aktion.rot td{background:rgba(220,38,38,.045)}
.mon.nt2 tr.s-aktion.gelb{--st:#d97706}.mon.nt2 tr.s-aktion.gelb td{background:rgba(217,119,6,.05)}
.mon.nt2 tr.s-unterwegs{--st:#135cc9}.mon.nt2 tr.s-kunde{--st:#7c3aed}.mon.nt2 tr.s-rueck{--st:#0e7490}
.mon.nt2 tr.s-geplant{--st:#cbd5e1}.mon.nt2 tr.s-erledigt{--st:#1caa24}
.mon.nt2 tr.s-erledigt td{color:var(--ink-2)}.mon.nt2 tr.s-erledigt .k b,.mon.nt2 tr.s-erledigt .l b{color:var(--ink-2)}
.mon.nt2 tr.z:hover td{background:var(--plane)}
.mon.nt2 .t{font-size:1rem;width:52px}
.mon.nt2 .l{white-space:nowrap;width:120px}.mon.nt2 .l b{font-size:.95rem}
.mon.nt2 .l span,.mon.nt2 .k span{font-size:.76rem;margin-top:1px}
.mon.nt2 .k b{max-width:300px;font-size:.92rem}
.mon.nt2 .k span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.nohne{color:#b45309;font-weight:700}
/* Zustand: Zeile 1 kräftig in der Zustandsfarbe, Zeile 2 grau */
.mon.nt2 td.zs{min-width:280px}
.mon.nt2 td[data-karte]{cursor:pointer}.mon.nt2 td.zs[data-karte]:hover .zs1{text-decoration:underline}
.zs1{font-weight:700;white-space:nowrap;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.zs1 small{font-weight:600;font-size:.72rem;opacity:.8}
.zs1.rot{color:#b91c1c}.zs1.gelb{color:#b45309}.zs1.blau{color:#135cc9}.zs1.lila{color:#6d28d9}
.zs1.tuerkis{color:#0e7490}.zs1.gruen{color:#15801c}.zs1.grau{color:var(--ink-2);font-weight:600}
.zs2{font-size:.76rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;margin-top:1px}
.zs2 .kn.progneu{padding:0 6px;font-size:.72rem;margin-left:6px;line-height:16px}
.nplus{background:#dc2626;color:#fff;border-radius:4px;padding:0 5px;margin-left:4px;font-size:.78rem}
.nrot{color:#b91c1c}.ngelb{color:#b45309}
.livep{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dc2626;margin-right:6px;vertical-align:1px}
/* Fahrtbalken schmal in der Zeile */
.mon.nt2 td.strecke{width:210px;padding-top:0;padding-bottom:2px}
.mon.nt2 .fbalken{margin:12px 0 0;max-width:210px;min-width:170px}
.mon.nt2 .fbalken .fbl{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Zu tun */
.mon.nt2 td.hd{white-space:normal;max-width:220px}
.mon.nt2 .mgrund{margin:1px 4px 1px 0}.mgrund.gruen{background:#dcfce7;color:#15803d}
.mon.nt2 .kn.versp{padding:2px 8px;font-size:.74rem;margin:1px 0;border-color:#dc2626;color:#b91c1c;background:transparent}
.mon.nt2 .kn.versp:hover{background:#dc2626;color:#fff}
/* App-Symbole kleiner */
.mon.nt2 td.app .us{gap:2px}.mon.nt2 td.app .sym{width:34px}.mon.nt2 td.app .sym svg{width:22px;height:22px;padding:3px}
.mon.nt2 td.app .sym span{font-size:.64rem;height:12px}
/* FB / Joker */
.mon.nt2 td.fbsp{white-space:nowrap;width:1%}.mon.nt2 td.fbsp .st{display:block;white-space:nowrap;font-size:.74rem;margin-top:1px}
.mon.nt2 td.fbsp:has(.st) .mini{height:26px}.mon.nt2 .mini{height:30px;max-width:70px}
.mon.nt2 .kn.joker2{padding:2px 7px;line-height:0;font-size:.9rem;background:transparent;border:1px dashed #a78bfa;color:#7c3aed;opacity:.75}
.mon.nt2 tr.z:hover .kn.joker2,.mon.nt2 .kn.joker2:hover{opacity:1;border-style:solid;background:#7c3aed;color:#fff}
/* Abschnitte als Band */
.mon.nt2 tr.mab td{padding:12px 8px 6px 12px;background:var(--surface);border-bottom:2px solid var(--st,#94a3b8);box-shadow:none}
.mon.nt2 tr.mab b{font-size:.98rem}
.mon.nt2 tr.mab.aktion{--st:#dc2626}.mon.nt2 tr.mab.aktion b{color:#b91c1c}
.mon.nt2 tr.mab.unterwegs{--st:#135cc9}.mon.nt2 tr.mab.unterwegs b{color:#135cc9}
.mon.nt2 tr.mab.kunde{--st:#7c3aed}.mon.nt2 tr.mab.kunde b{color:#6d28d9}
.mon.nt2 tr.mab.rueck{--st:#0e7490}.mon.nt2 tr.mab.rueck b{color:#0e7490}
.mon.nt2 tr.mab.geplant{--st:#94a3b8}.mon.nt2 tr.mab.geplant b{color:var(--ink-2)}
.mon.nt2 tr.mab.erledigt{--st:#1caa24}.mon.nt2 tr.mab.erledigt b{color:#15801c}
.mon.nt2 tr.mab td::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--st);margin-right:8px;vertical-align:0}
.mon.nt2 tbody tr.mab:first-child td{padding-top:6px}

/* ===== Monitor NEU (08.10.2026) — ruhig, Farbe nur bei Problemen; Präfix m3 ===== */
.m3kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.m3kopf .m3tag{min-width:150px;text-align:center;font-size:1.05rem}
.m3kopf .rechts{margin-left:auto;display:flex;gap:8px}
.m3sts{display:inline-flex;border:1px solid var(--rand);border-radius:10px;overflow:hidden;margin-left:10px}
.m3sts button{border:0;background:var(--surface);color:var(--ink-2);font:inherit;font-weight:600;padding:7px 12px;cursor:pointer}
.m3sts button+button{border-left:1px solid var(--rand)}
.m3sts button.an{background:var(--ink);color:var(--surface)}
#m3such{flex:0 1 330px;min-width:200px;padding:8px 11px;border:1px solid var(--rand);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit}
.m3kpi{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:0 0 12px}
.m3kpi button{border:1px solid var(--rand);background:var(--surface);color:var(--ink);border-radius:12px;padding:8px 12px;text-align:left;cursor:pointer;font:inherit}
.m3kpi button b{display:block;font-size:1.55rem;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}
.m3kpi button span{font-size:.8rem;color:var(--ink-2);font-weight:600}
.m3kpi button.rot{border-color:#dc2626;background:#fef2f2}.m3kpi button.rot b{color:#b91c1c}
.m3kpi button.null{opacity:.45}
.m3kpi button.an{outline:2.5px solid var(--blau);outline-offset:1px}
.m3karte{padding:0;overflow:hidden}
table.m3{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem}
table.m3 col.c-cb{width:30px}table.m3 col.c-t{width:58px}table.m3 col.c-ph{width:74px}table.m3 col.c-l{width:118px}
table.m3 col.c-k{width:21%}table.m3 col.c-zs{width:29%}table.m3 col.c-pb{width:22%}table.m3 col.c-pa{width:140px}table.m3 col.c-ap{width:150px}
table.m3 th{text-align:left;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding:9px 8px;border-bottom:1px solid var(--rand);background:var(--surface)}
table.m3 td{padding:7px 8px;border-bottom:1px solid var(--rand);vertical-align:middle;overflow:hidden}
table.m3 td b,table.m3 td small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.m3 td small{color:var(--ink-2);font-size:.78rem;margin-top:1px}
table.m3 td.t{font-weight:800;font-variant-numeric:tabular-nums;font-size:.98rem}
table.m3 td.zs div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.m3 td.zs b{display:inline}
table.m3 td[data-karte]{cursor:pointer}
table.m3 tr.m3z:hover td{background:rgba(42,120,214,.05)}
table.m3 tr.m3z td:first-child{border-left:4px solid transparent}
table.m3 tr.p-rot td:first-child{border-left-color:#dc2626}
table.m3 tr.p-gelb td:first-child{border-left-color:#d97706}
table.m3 tr.p-blau td:first-child{border-left-color:#2a78d6}
table.m3 tr.frueher td{background:rgba(201,133,0,.05)}
tr.m3ab td{background:var(--plane);padding:9px 10px;border-bottom:1px solid var(--rand)}
tr.m3ab b{font-size:.92rem}
tr.m3ab em{font-style:normal;font-weight:700;margin-left:8px;padding:1px 8px;border-radius:99px;background:var(--surface);border:1px solid var(--rand);font-size:.8rem}
tr.m3ab span{color:var(--ink-2);font-size:.8rem;margin-left:10px}
tr.m3ab button{margin-left:12px;padding:2px 9px;font-size:.8rem}
tr.m3ab.aktion td{background:#fef2f2;color:#991b1b}
/* Phasen-Leiste: 5 Punkte, erledigte Stufen dunkel, aktuelle größer */
.m3ph{display:inline-flex;align-items:center;gap:4px}
.m3ph i{width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid var(--rand)}
.m3ph i.w{background:var(--ink-2);border-color:var(--ink-2)}
.m3ph i.j{width:12px;height:12px;background:var(--blau);border-color:var(--blau)}
.m3live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.m3st{font-style:normal;font-size:.76rem;font-weight:700;padding:1px 7px;border-radius:99px;margin-left:6px;white-space:nowrap;border:1px solid var(--rand);color:var(--ink-2)}
.m3st.ok{color:var(--ink-2)}
.m3st.rot{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.m3st.gelb{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.m3st.blau{background:#dbeafe;border-color:#93c5fd;color:#1e40af}
.m3p{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:2px 4px 2px 8px;border-radius:7px;margin:2px 4px 2px 0;white-space:nowrap;max-width:100%}
table.m3 td.pb{white-space:normal;line-height:1.25}
.m3p.rot{background:#fee2e2;color:#991b1b}.m3p.gelb{background:#fef3c7;color:#92400e}.m3p.blau{background:#dbeafe;color:#1e40af}
.m3p:not(:has(button)){padding-right:8px}
.m3akt{border:1px solid currentColor;background:#fff;color:inherit;font:inherit;font-size:.74rem;font-weight:700;border-radius:5px;padding:1px 6px;cursor:pointer}
.m3fb{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.m3fb img{width:30px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--rand)}
.m3fb .m3st{margin-left:0}
td.pa img.mini,td.pa .cfoto img{max-height:30px}
.m3ohne{color:#b45309;font-weight:700}
.m3fuss{color:var(--ink-2);font-size:.78rem;margin:8px 4px 16px}
@media (prefers-color-scheme:dark){
  .m3kpi button.rot{background:#3a1212}.m3kpi button.rot b{color:#fca5a5}
  tr.m3ab.aktion td{background:#3a1212;color:#fecaca}
  .m3st.rot,.m3p.rot{background:#4c1414;color:#fecaca;border-color:#7f1d1d}
  .m3st.gelb,.m3p.gelb{background:#422c06;color:#fde68a;border-color:#78350f}
  .m3st.blau,.m3p.blau{background:#132a4f;color:#bfdbfe;border-color:#1e3a8a}
  .m3akt{background:transparent}
}
table.m3 td.ap .us{zoom:.82}table.m3 td.ap .klein2{font-size:.72rem}
/* Chef 11.10.: Joker-Symbol = Container aus seinem Foto 6 (Wort „Joker“ weg) */
img.jokerbild{height:20px;width:auto;vertical-align:middle;margin-right:5px;border-radius:2px}
.mon .kn.joker{background:transparent;border-color:transparent;padding:2px 4px}
.mon .kn.joker:hover{background:transparent;border-color:transparent;filter:brightness(1.1)}
/* kein Lila mehr um den Joker, nur der Container (Chef 11.10.) */
.mon.nt2 .kn.joker2,.mon.nt2 tr.z:hover .kn.joker2,.mon.nt2 .kn.joker2:hover,.kn.joker2,.kn.joker2:hover{background:transparent;border:0;box-shadow:none;padding:1px;opacity:1}
.kn.joker2:hover img.jokerbild,.mon .kn.joker:hover img.jokerbild{filter:brightness(1.1)}
.mon .kn.joker img.jokerbild{height:22px;margin:0}
.kn.joker2 img.jokerbild{height:18px;margin:0}
.mon.nt2 .kn.joker2{line-height:1}
/* Chef 11.10.: Brief · PDF mit Auge · Drucker im iOS-18-Stil — gefülltes weißes Zeichen auf abgerundeter Kachel (Squircle),
   grün = erledigt, hellgrau = noch nicht. html body … schlägt die Regeln aus klassisch.css/ADMIN-CSS ohne !important. */
html body .sym.ios{--io-k:#e5e5ea;color:#aeaeb2}
html body .sym.ios svg{border-radius:27%;padding:4px;background:linear-gradient(180deg,#f2f2f7,#e5e5ea);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08)}
html body .sym.ios.gruen{--io-k:#2fb350;color:#fff}
html body .sym.ios.gruen svg{background:linear-gradient(180deg,#4cd964,#28a745);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 3px rgba(40,167,69,.35)}
html body .sym.ios.gelb{--io-k:#e08600;color:#fff}html body .sym.ios.gelb svg{background:linear-gradient(180deg,#ffb340,#ff9500)}
html body .sym.ios.rot{--io-k:#d70015;color:#fff}html body .sym.ios.rot svg{background:linear-gradient(180deg,#ff6961,#ff3b30)}
.sym.ios .io-s{fill:none;stroke:var(--io-k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sym.ios .io-f{fill:var(--io-k)}
.sym.ios .io-r{stroke:var(--io-k);stroke-width:1.3}
/* Chef 11.10.: Zeichen „zugewiesen“ (Pfeil + LKW) im iOS-18-Stil, passend zu den Fahrer-App-Kacheln */
html body .zuw{width:36px;height:19px;vertical-align:-4px;margin-right:6px;color:#fff;border-radius:5.5px;
  background:linear-gradient(180deg,#4cd964,#28a745);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(40,167,69,.3)}
html body .zuw .io-k{stroke:#2fb350}
html body .mon .zuw,html body.klassisch .mon .zuw{color:#fff}
/* Chef 11.10.: hell-oranger LKW = Auftrag nicht zugewiesen (statt Schrift „kein LKW“) */
html body .zuw.nz,html body.klassisch .mon .zuw.nz{background:linear-gradient(180deg,#ffd08a,#ffb45c);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(255,149,0,.25);color:#fff}
html body .zuw.nz .io-k{stroke:#ffb45c}
/* Chef 11.10.: Zündung aus = nur das Aus-Zeichen ⏻ auf grauer iOS-Kachel, darunter klein „seit …“ */
.zuend{display:inline-flex;flex-direction:column;align-items:center;gap:3px;vertical-align:middle}
.zuend svg{width:26px;height:26px;padding:3.5px;border-radius:27%;color:#fff;background:linear-gradient(180deg,#a8a8ad,#86868b);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.15)}
.zuend small{font-size:.68rem;line-height:1;color:var(--ink-2,#6b7280);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Chef 11.10.: kein GPS = Ortungspfeil mit Schrägstrich auf oranger iOS-Kachel (Schrägstrich mit Kachelfarbe abgesetzt) */
.zuend.gpsweg svg{background:linear-gradient(180deg,#ffb340,#ff9500);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(255,149,0,.3)}
.zuend.gpsweg .io-sl{stroke:#ffa31a;stroke-width:3.6;stroke-linecap:round}
/* Chef 11.10.: unterwegs = fahrender LKW auf blauer iOS-Kachel */
.zuend.unterw svg{background:linear-gradient(180deg,#4aa8ff,#007aff);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,122,255,.3)}
.zuend.unterw .io-k{stroke:#1a86ff}
/* Chef 11.10.: noch nicht beim Kunden (Termin vorbei) = weiße Uhr auf roter iOS-Kachel */
.zuend.nochnicht svg{background:linear-gradient(180deg,#ff6961,#ff3b30);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(255,59,48,.3)}
.zuend.nochnicht .io-u{stroke:#ff4b40;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Chef 11.10.: gerade beim Kunden angekommen = weiße Ortsnadel auf lila iOS-Kachel */
.zuend.beimk svg{background:linear-gradient(180deg,#c77dff,#af52de);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(175,82,222,.3)}
.zuend.beimk .io-f{fill:#b862e4}
/* Chef 11.10.: Rückfahrt = weißer Wendepfeil auf türkiser iOS-Kachel (statt „↩“) */
svg.rueckz{width:18px;height:18px;padding:2.5px;margin-right:5px;vertical-align:-5px;border-radius:27%;color:#fff;
  background:linear-gradient(180deg,#5ac8d8,#30b0c7);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(48,176,199,.3)}
/* Chef 11.10.: keine App = durchgestrichenes iPhone auf hellgrauer iOS-Kachel (wie die offenen Fahrer-App-Zeichen) */
.zuend.keineapp svg{color:#aeaeb2;background:linear-gradient(180deg,#f2f2f7,#e5e5ea);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08)}
.zuend.keineapp .io-f{fill:#eaeaef}
.zuend.keineapp .io-sl{stroke:#ebebf0;stroke-width:4;stroke-linecap:round}
/* Chef 11.10.: Joker = iOS-Kamera auf hellgrauer Kachel (ruhig, steht in jeder Zeile); Maus darauf → blau = klickbar */
html body svg.jokerbild{width:26px;height:26px;padding:4px;margin:0;border-radius:27%;vertical-align:middle;color:#8e8e93;
  background:linear-gradient(180deg,#f2f2f7,#e5e5ea);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08);transition:background .15s,color .15s}
html body svg.jokerbild .io-f{fill:#ebebf0}
html body .kn:hover svg.jokerbild,html body .pt-kn:hover svg.jokerbild{color:#fff;background:linear-gradient(180deg,#4aa8ff,#007aff)}
html body .kn:hover svg.jokerbild .io-f{fill:#1a86ff}
html body .pt-kn svg.jokerbild{width:20px;height:20px;padding:3px;margin-right:6px}
html body .kn.joker,html body .kn.joker:hover,html body.klassisch .mon .kn.joker,html body.klassisch .mon .kn.joker:hover{filter:none}
/* Chef 11.10.: Abgabe = Container mit Pfeil nach unten auf iOS-Kachel (indigo / knapp orange / zu spät rot), statt „↩“ */
svg.abgz{width:18px;height:18px;padding:2.5px;margin-right:5px;vertical-align:-5px;border-radius:27%;color:#fff;--io-k:#5e5ce6;
  background:linear-gradient(180deg,#7d7aff,#5856d6);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(88,86,214,.3)}
svg.abgz.gelb{--io-k:#ff9f0a;background:linear-gradient(180deg,#ffb340,#ff9500)}
svg.abgz.rot{--io-k:#ff453a;background:linear-gradient(180deg,#ff6961,#ff3b30)}
svg.abgz .io-s{stroke:var(--io-k);stroke-width:1.3;stroke-linecap:round}
/* Chef 11.10. abends: Zeichen in EINER geraden Reihe (links bündig statt über dem Text zentriert — „kein Gerät“ ist kürzer) */
.zuend{align-items:flex-start}
/* ⏻ wie beim iPhone-Ausschalten: rotes Zeichen auf weißer Kachel */
.zuend.aus svg{color:#ff3b30;background:linear-gradient(180deg,#fff,#f2f2f7);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.12)}
/* Kamera (Joker): blaue Kamera auf weißer Kachel = antippbar; Maus darauf → ganz blau */
html body svg.jokerbild{color:#007aff;background:linear-gradient(180deg,#fff,#f2f2f7);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.12)}
html body svg.jokerbild .io-f{fill:#f7f7fa}
/* Chef 11.10. abends „alles als iOS“: Kachel je Zustand (iz), Farbe = Bedeutung */
.zuend.iz svg{color:#fff;--io-k:#888}
.zuend.iz-rot svg{--io-k:#ff453a;background:linear-gradient(180deg,#ff6961,#ff3b30);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(255,59,48,.3)}
.zuend.iz-orange svg{--io-k:#ff9f0a;background:linear-gradient(180deg,#ffb340,#ff9500);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(255,149,0,.3)}
.zuend.iz-gruen svg{--io-k:#2fb350;background:linear-gradient(180deg,#4cd964,#28a745);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(40,167,69,.3)}
.zuend.iz-blau svg{--io-k:#1a86ff;background:linear-gradient(180deg,#4aa8ff,#007aff);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(0,122,255,.3)}
.zuend.iz-lila svg{--io-k:#b862e4;background:linear-gradient(180deg,#c77dff,#af52de);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(175,82,222,.3)}
.zuend.iz-indigo svg{--io-k:#5e5ce6;background:linear-gradient(180deg,#7d7aff,#5856d6);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 2px rgba(88,86,214,.3)}
.zuend.iz-hell svg{color:#8e8e93;--io-k:#ebebf0;background:linear-gradient(180deg,#f2f2f7,#e5e5ea);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08)}
.zuend.iz .io-f{fill:var(--io-k)}
.zuend.iz .io-s{stroke:var(--io-k);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.zuend.iz.iz-blau .io-k,.zuend.iz.iz-rot .io-k{stroke:var(--io-k)}
.zuend.iz.iz-rot .io-u{stroke:var(--io-k)}
.izreihe{display:inline-flex;gap:10px;align-items:flex-start}
.kn.versp svg{width:16px;height:16px;vertical-align:-3px;margin-right:5px}
.kn.versp svg .io-s{stroke:#fff;fill:none}
/* Chef 11.10.: neues CMR = Fahrer fertig, fährt zurück — Karte oben rechts, Zeile leuchtet grün bis Klick; Glocke für Push */
#cmrhinweise{position:fixed;top:14px;right:14px;z-index:9000;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100vw - 28px)}
.cmrh{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 8px 28px rgba(0,0,0,.18),inset 0 0 0 .5px rgba(0,0,0,.08);animation:cmrh-rein .35s cubic-bezier(.2,.9,.3,1.2)}
.cmrh:hover{background:#fff}
.cmrh-z svg{width:30px;height:30px;padding:5px;border-radius:27%;color:#fff;background:linear-gradient(180deg,#4cd964,#28a745)}
.cmrh-t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0;font-size:.86rem;color:#1c1c1e}
.cmrh-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrh-t small{font-size:.72rem;color:#8e8e93}
.cmrh-x{border:0;background:transparent;font-size:1.2rem;line-height:1;color:#8e8e93;cursor:pointer;padding:0 2px}
@keyframes cmrh-rein{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
tr.cmrneu td{background:rgba(52,199,89,.14)!important;animation:cmrneu 1.6s ease-in-out 4}
@keyframes cmrneu{50%{background:rgba(52,199,89,.32)}}
#dispoglocke{position:fixed;left:14px;bottom:14px;z-index:8000;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 14px 9px 40px;border:0;border-radius:14px;cursor:pointer;font:inherit;font-weight:600;font-size:.85rem;color:#fff;
  background:linear-gradient(180deg,#4aa8ff,#007aff);box-shadow:0 6px 20px rgba(0,122,255,.35);position:fixed}
#dispoglocke svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px}
#dispoglocke svg .io-s{stroke:#007aff;fill:none;stroke-width:1.6}
#dispoglocke small{font-weight:400;font-size:.7rem;opacity:.85}
/* Chef 11.10.: Inhalt links passt sich selbst an die Bildschirmbreite an (plantafel.js einpassen) */
html.np-passend main#inhalt > *{zoom:var(--np-passend)}

/* Chef 25.10.: Zoom + Scrollen direkt auf der Tafel (unten rechts) */
.pt-koerper{position:relative}
.pt-zoom{position:absolute;right:22px;bottom:22px;z-index:6;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;
 background:var(--pt-bg2,#1f2937);border:1px solid var(--pt-ln);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.pt-zoom button{width:38px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--pt-tx);font:700 20px "Segoe UI",system-ui,sans-serif;
 cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pt-zoom button svg{width:18px;height:18px}
.pt-zoom button:hover:not(:disabled){background:var(--pt-bg3)}
.pt-zoom button:disabled{opacity:.3;cursor:default}
.pt-zoom button.an{color:#38bdf8}
.pt-zoom span{min-width:66px;text-align:center;font:600 13px "Segoe UI",system-ui,sans-serif;color:var(--pt-tx2,var(--pt-tx))}
.pt-zoom button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================================================================
   KLARER ALS cTRANS (Chef 25.10., Vergleich mit dem cTrans-Planungsbild)
   – kein leerer Streifen mehr unter den Kennzeichen, Stunden mind. 44 px (JS), Zeitachse groß „06:00“,
     Stundenlinie kräftig / halbe Stunde fein, Kasten mit festen Zeilen + Marke IMP/EXP, Liste links schmal
   ================================================================================================================ */
:root{--pt-zeit:64px;--pt-std:#cfd5df;--pt-halb:#eceff3}
html.pt-dunkel{--pt-std:rgba(255,255,255,.16);--pt-halb:rgba(255,255,255,.06)}
.pt-gitter{align-content:start}
/* Zeitachse: volle Uhrzeit, gut lesbar, auf Höhe der Stundenlinie */
.pt-zeiten div{font-size:13px!important;font-weight:700!important;color:var(--pt-tx)!important;padding-right:10px;top:-.6em;letter-spacing:0}
.pt-zeiten div small{font-size:13px!important;font-weight:700!important;color:var(--pt-tx)!important}
.pt-zeiten div::after{content:"";position:absolute;right:0;top:.6em;width:6px;border-top:1px solid var(--pt-std)}
/* Raster: Stunde durchgezogen, halbe Stunde fein gestrichelt */
.pt-spalte{border-left:1px solid var(--pt-std)!important;
  background-image:linear-gradient(to bottom,var(--pt-std) 0,var(--pt-std) 1px,transparent 1px,transparent 50%,var(--pt-halb) 50%,var(--pt-halb) calc(50% + 1px),transparent calc(50% + 1px))!important;
  background-size:100% var(--pt-h)!important}
.pt-spalte.alt{background-color:transparent!important}
/* Kopf je LKW: klare Unterkante */
.pt-ecke,.pt-sk{border-bottom:2px solid var(--pt-std)!important}
/* Kasten: feste Zeilen — Zeit + Marke · Kunde (höchstens 2 Zeilen) · Ort · Referenz */
.pt-k{padding:4px 6px 0 7px!important}
.pt-k .k1{gap:5px}
.pt-k .k2{-webkit-line-clamp:2!important}
.pt-k .k3{-webkit-line-clamp:1!important}
.pt-k .k4{opacity:.92}
.pk-ri{margin-left:auto;flex:none;font:700 10px/16px "Segoe UI",system-ui,sans-serif;letter-spacing:.02em;padding:0 5px;border-radius:4px;
  background:rgba(255,255,255,.22);color:#fff;white-space:nowrap}
.pk-ri.imp{box-shadow:inset 3px 0 0 #fbbf24}
.pk-ri.exp{box-shadow:inset 3px 0 0 #34d399}
/* Liste links: schmal und ruhig — eine Zeile Zeit/Ref/Marke, eine Zeile Kunde · Ort */
.pt-koerper{grid-template-columns:280px 1fr}
.pt-item{padding:6px 10px 6px 13px!important;margin:4px 0!important;border-radius:8px!important}
.pt-item::before{top:6px!important;bottom:6px!important}
.pt-item .z1 b{font-size:14px!important}
.pt-item .z2{margin-top:1px!important;font-size:13px}
.pt-item .z2 .z2o{font-weight:500;opacity:.8}
.pt-item .z3{display:none}
.pt-item .pt-badge{font-size:10.5px;padding:1px 6px}
/* Zeilen so bemessen, dass sie in den 2-Std.-Kasten (≥ 86 px) ganz passen: 18 + 2×15 + 15 + 15 + Rand */
.pt-k .k1{height:18px!important;line-height:18px!important}
.pt-k .k1 b{font-size:14px!important}
.pt-k .k2{font-size:12.5px!important;line-height:15px!important;margin-top:1px!important;hyphens:none!important;-webkit-hyphens:none!important;overflow-wrap:break-word!important;word-break:normal!important}
.pt-k .k3,.pt-k .k4{font-size:11.5px!important;line-height:15px!important;white-space:nowrap!important;display:block!important;text-overflow:ellipsis!important}
/* Zoom-Leiste oben rechts über der Tafel (unten lag sie bei langer Tafel unter dem Bildschirmrand) */
.pt-zoom{bottom:auto!important;top:calc(var(--pt-fs) * var(--pt-kopfh) + 10px);right:24px}
.pt-koerper.ohneliste .pt-zoom,.pt-zoom{opacity:.96}
/* Feinschliff 25.10. — Zoom-Leiste in der Datumszeile; Werkzeuge im Kasten unten statt über der Uhrzeit */
.pt-zoom{position:static!important;margin-left:auto;box-shadow:none;background:var(--pt-bg2);top:auto!important;right:auto!important;bottom:auto!important}
.pt-zoom button{width:34px;height:32px}
.pk-werkzeug{top:auto!important;bottom:4px;left:4px;right:auto!important}
.pt-k.geplant .pk-werkzeug{left:calc(var(--pt-fs) * 30px)}
.pt-k .pk-ok{bottom:auto!important;top:3px;right:3px}