/* ============================================================
   Projekte — Oberflaeche.

   Nimmt die Farben der Suite (--accent, --scrm-*), damit die Seite
   nicht wie ein Fremdkoerper wirkt. Eigene Praefixe (pj-), damit
   nichts mit den Kopien kollidiert.
   ============================================================ */
/* Die Ebene selbst schneidet zu. Der Radius an .pj-frame allein
   genuegt NICHT: die Bildlaufleiste wird in den Polsterbereich
   gemalt und haelt sich dabei nicht an die Rundung — gemessen, in
   der Ecke oben rechts stand ein eckiger grauer Block mit Pfeil.
   overflow:hidden an der Ebene darueber schneidet ihn weg.

   Geprueft, dass dabei nichts verschwindet: das einzige Kind der
   Ebene ist .pj-frame. Dialoge haengen am body, das Schwebefenster
   liegt fest positioniert — beide kuemmert dieser Schnitt nicht. */
#dealOverlay{ border-radius:18px; overflow:hidden; }

/* Die Seite liegt als eigene Ebene UEBER .crs-body — crm-suite.js
   setzt sie mit gastPlatzieren() auf genau dessen Rechteck
   (gemessen: beide 240,64 bis 1390,890). Die Flaeche darunter ist
   rundum mit 18 gerundet und laesst rechts und unten 10 Pixel Luft;
   diese Ebene war eckig und hat die vier Ecken wieder zugedeckt.
   Also traegt sie dieselbe Form. */
.pj-frame{
  position:absolute; inset:0; overflow:auto;
  border-radius:18px;
  background:var(--scrm-grund,#f5f8fc); color:var(--text,#12233a);
  font:14px/1.45 "Roboto Flex","Segoe UI",system-ui,sans-serif;
  padding:18px 22px 22px;
}
.pj-frame *{ box-sizing:border-box; }
.pj-frame .material-symbols-rounded{ vertical-align:middle; line-height:1; }

/* ---------- Liste ---------- */
.pj-liste{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
.pj-karte{
  all:unset; cursor:pointer; display:block; padding:15px 17px; border-radius:18px;
  background:#fff; box-shadow:0 0 0 1px var(--scrm-linie,#e7eef6); transition:.14s;
}
.pj-karte:hover{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.45), 0 6px 18px -8px rgba(18,35,58,.22); }
.pj-karte:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pj-kkopf{ display:flex; align-items:flex-start; gap:10px; }
.pj-kkopf b{ flex:1; font-size:15px; font-weight:750; letter-spacing:-.01em; }
.pj-kfirma{ margin-top:3px; font-size:12.5px; color:var(--scrm-mut,#8a97a8); display:flex; align-items:center; gap:5px; }
.pj-kfirma .material-symbols-rounded{ font-size:15px; }
.pj-kfuss{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; font-size:12px; color:var(--scrm-mut,#8a97a8); }
.pj-kfuss span{ display:inline-flex; align-items:center; gap:5px; }
.pj-kfuss .material-symbols-rounded{ font-size:15px; }
.pj-kfuss .pj-faellig{ color:var(--scrm-warm,#c2691a); font-weight:650; }
.pj-kfuss .pj-ohne{ color:var(--scrm-kalt,#b3261e); }

.pj-stand{ flex:none; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; }
.pj-stand.gut{ background:rgba(var(--scrm-gut-rgb,14,124,107),.13); color:var(--scrm-gut,#0e7c6b); }
.pj-stand.warm{ background:rgba(var(--scrm-warm-rgb,194,105,26),.13); color:var(--scrm-warm,#c2691a); }
.pj-stand.kalt{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.13); color:var(--scrm-kalt,#b3261e); }

/* Einfluss mal Haltung — die eine Zahl, die etwas aussagt. */
.pj-stimmung{ display:flex; height:7px; margin-top:11px; border-radius:4px; overflow:hidden; background:#eef3f9; }
.pj-stimmung span{ display:block; height:100%; }
.pj-stimmung .gut{ background:var(--scrm-gut,#0e7c6b); }
.pj-stimmung .neu{ background:#c3cfdc; }
.pj-stimmung .kalt{ background:var(--scrm-kalt,#b3261e); }
.pj-stimmtext{ margin-top:5px; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.pj-stimmtext b{ color:var(--text,#12233a); }

/* ---------- Kopf der Detailseite ---------- */
.pj-kopf{ display:flex; align-items:flex-start; gap:12px; margin-bottom:15px; }
.pj-kopf h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.015em; }
.pj-sub{ margin-top:2px; font-size:13px; color:var(--scrm-mut,#8a97a8); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pj-sub .material-symbols-rounded{ font-size:16px; }
.pj-zurueck{ all:unset; cursor:pointer; flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:var(--scrm-mut,#8a97a8); }
.pj-zurueck:hover{ background:#eef3f9; color:var(--text,#12233a); }

/* ---------- Dreispalter ---------- */
.pj-raster{ display:grid; gap:14px; grid-template-columns:minmax(0,20fr) minmax(0,60fr) minmax(0,20fr); align-items:start; }
@media (max-width:1250px){ .pj-raster{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .pj-rechts{ grid-column:1/-1; } }
@media (max-width:860px){ .pj-raster{ grid-template-columns:minmax(0,1fr); } }

.pj-abschnitt{ display:flex; align-items:center; gap:8px; margin:0 2px 8px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--scrm-mut,#8a97a8); }
.pj-summe{ margin-left:auto; padding:1px 8px; border-radius:10px; font-size:10.5px; letter-spacing:.03em;
  background:rgba(var(--scrm-warm-rgb,194,105,26),.14); color:var(--scrm-warm,#c2691a); text-transform:none; }
.pj-summe.ok{ background:rgba(var(--scrm-gut-rgb,14,124,107),.13); color:var(--scrm-gut,#0e7c6b); }

/* ---------- Links: die Kaufrunde ---------- */
.pj-person{ display:flex; gap:11px; padding:12px 13px; margin-bottom:8px; border-radius:14px;
  background:#fff; box-shadow:0 0 0 1px var(--scrm-linie,#e7eef6); cursor:pointer; }
.pj-person:hover{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.45); }
.pj-av{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:13.5px; font-weight:800; }
.pj-pmitte{ flex:1; min-width:0; }
.pj-pmitte b{ font-size:14px; }
.pj-prolle{ font-size:12px; color:var(--scrm-mut,#8a97a8); }
.pj-pchips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pj-chip{ display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:10px;
  font-size:10.5px; font-weight:700; background:#eef3f9; color:#41556d; }
.pj-chip .material-symbols-rounded{ font-size:13px; }
.pj-chip.rolle{ background:rgba(var(--accent-rgb),.13); color:var(--accent-dark,#c96a22); }
.pj-chip.gut{ background:rgba(var(--scrm-gut-rgb,14,124,107),.13); color:var(--scrm-gut,#0e7c6b); }
.pj-chip.kalt{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.13); color:var(--scrm-kalt,#b3261e); }
.pj-chip.still{ background:rgba(var(--scrm-warm-rgb,194,105,26),.13); color:var(--scrm-warm,#c2691a); }
.pj-pnotiz{ margin:7px 0 0; font-size:12.5px; line-height:1.5; color:#41556d; }
.pj-gewicht{ flex:none; text-align:right; min-width:52px; }
.pj-gewicht b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.pj-gewicht span{ font-size:9.5px; color:var(--scrm-mut,#8a97a8); }
.pj-gewicht.vorschlag b{ color:var(--scrm-mut,#8a97a8); font-weight:700; }

.pj-luecke{ display:flex; gap:9px; padding:11px 13px; border-radius:14px; font-size:12.5px; line-height:1.55;
  background:rgba(var(--scrm-warm-rgb,194,105,26),.09); color:#41556d; }
.pj-luecke .material-symbols-rounded{ font-size:18px; color:var(--scrm-warm,#c2691a); flex:none; }

/* ---------- Mitte: Verlauf ---------- */
.pj-mitte{ background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--scrm-linie,#e7eef6); overflow:hidden; }
.pj-reiter{ display:flex; gap:2px; padding:9px 12px 0; border-bottom:1px solid var(--scrm-linie,#e7eef6);
  overflow-x:auto; }
.pj-reiter button{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:10px 10px 0 0; font-size:13px; font-weight:600;
  color:#41556d; white-space:nowrap; }
.pj-reiter button .material-symbols-rounded{ font-size:17px; }
.pj-reiter button:hover{ background:#eef3f9; }
.pj-reiter button.an{ background:#eef3f9; color:var(--accent-dark,#c96a22); font-weight:700;
  box-shadow:inset 0 -2px 0 var(--accent); }
.pj-verlauf{ padding:12px 14px; max-height:min(58vh,540px); overflow:auto; }
.pj-ve{ display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.pj-ve:last-child{ border-bottom:0; }
.pj-vic{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#eef3f9; color:#41556d; }
.pj-vic .material-symbols-rounded{ font-size:17px; }
.pj-vic.anruf{ background:rgba(var(--scrm-gut-rgb,14,124,107),.13); color:var(--scrm-gut,#0e7c6b); }
.pj-vic.mail{ background:rgba(var(--accent-rgb),.14); color:var(--accent-dark,#c96a22); }
.pj-vic.termin{ background:rgba(45,111,148,.14); color:#2d6f94; }
.pj-vic.angebot{ background:rgba(109,79,196,.14); color:#6d4fc4; }
.pj-vkopf{ display:flex; align-items:baseline; gap:10px; }
.pj-vkopf b{ flex:1; font-size:13.5px; }
.pj-vkopf span{ flex:none; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.pj-vwer{ font-size:12px; color:var(--scrm-mut,#8a97a8); }
.pj-ve p{ margin:5px 0 0; font-size:12.5px; line-height:1.55; color:#41556d; }

/* ---------- Rechts: was zu entscheiden ist ---------- */
.pj-rechts{ display:grid; grid-template-columns:minmax(0,1fr); gap:11px; align-content:start; }
/* Die Leiter der Radien: 18 aussen, 14 fuer Bloecke INNERHALB
   einer Karte, 10/11 fuer Zeilen und Felder, 8 an kleinen
   Knoepfen, 999 an Pillen. Aussen und innen duerfen nicht
   denselben Wert tragen — sonst sieht die innere Schachtel aus,
   als waere sie aus ihrem Behaelter gerutscht. Aussen sind nur
   .pj-kasten, .pj-mitte, .pj-karte und .pj-schwebe. */
.pj-kasten{ background:#fff; border-radius:18px; box-shadow:0 0 0 1px var(--scrm-linie,#e7eef6); padding:12px 14px; }
.pj-ktitel{ display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--scrm-mut,#8a97a8); }
.pj-ktitel .material-symbols-rounded{ font-size:16px; }
.pj-zahl{ min-width:19px; height:19px; padding:0 6px; border-radius:10px; display:grid;
  place-items:center; font-size:11px; letter-spacing:0; background:#eef3f9; color:#41556d; }
/* Rechts in der Titelzeile: erst der Knopf des Kastens, dann der
   Griff. Die Gruppe allein traegt den automatischen Rand. */
.pj-krechts{ margin-left:auto; display:flex; align-items:center; gap:2px; flex:none; }
.pj-krechts .pj-zubtn{ margin-left:0; }
/* ---------- Der Griff ----------
   Neun Kaesten in drei Spalten: wer jeden Deal gleich benutzt,
   braucht nicht jeden Kasten. Die ganze Titelzeile ist der Griff,
   der Pfeil zeigt nur, wohin es geht — und ist der Weg fuer die
   Tastatur, weil ein div niemandem gehoert. */
.pj-ktitel{ cursor:pointer; -webkit-user-select:none; user-select:none; }
.pj-ktitel:hover{ color:#41556d; }
.pj-kpfeil{ all:unset; cursor:pointer; display:grid; place-items:center; width:22px; height:22px;
  border-radius:7px; color:var(--scrm-mut,#8a97a8); }
.pj-kpfeil:hover{ background:#eef3f9; }
.pj-kpfeil .material-symbols-rounded{ font-size:19px; transition:transform .16s ease; }
.pj-kasten.zu > .pj-ktitel{ margin-bottom:0; }
.pj-kasten.zu > .pj-kinhalt{ display:none !important; }
.pj-kasten.zu .pj-kpfeil .material-symbols-rounded{ transform:rotate(-90deg); }
/* Zugeklappt braucht der Kasten keine Hoehe mehr zu beanspruchen.
   Der Verlaufskasten links streckt sich sonst weiter ueber die
   ganze Spalte, und der zugeklappte Titel haengt in der Luft. */
.pj-kasten.zu{ flex:none !important; padding-bottom:10px; }
.pj-zeile{ display:flex; align-items:baseline; gap:9px; padding:5px 0; font-size:13px;
  border-bottom:1px solid var(--scrm-linie,#e7eef6); }
.pj-zeile:last-child{ border-bottom:0; }
.pj-zeile span{ flex:1; min-width:0; }
.pj-zeile b{ flex:none; font-variant-numeric:tabular-nums; }
.pj-zeile em{ flex:none; font-style:normal; font-size:11.5px; color:var(--scrm-mut,#8a97a8); }
.pj-leerzeile{ padding:6px 0; font-size:12.5px; color:var(--scrm-mut,#8a97a8); }

/* Der naechste Schritt steht oben — ohne ihn ist es ein Bericht.
   Seit dem 30.10. in einem Kasten wie die anderen, damit er
   mitklappt; die Faerbung sitzt darum an der Zeile DARIN
   (.pj-nz) und nicht mehr am Kasten. */
.pj-nz{ display:flex; gap:10px; align-items:flex-start; padding:9px 11px; border-radius:11px; }
.pj-nz .material-symbols-rounded{ font-size:19px; flex:none; margin-top:1px; }
.pj-nz.naechster{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4); }
.pj-nz.naechster .material-symbols-rounded{ color:var(--accent); }
.pj-nz.naechster.faellig{ background:rgba(var(--scrm-warm-rgb,194,105,26),.08);
  box-shadow:0 0 0 1px rgba(var(--scrm-warm-rgb,194,105,26),.4); }
.pj-nz.warnung{ background:rgba(var(--scrm-kalt-rgb,179,38,30),.07);
  box-shadow:0 0 0 1px rgba(var(--scrm-kalt-rgb,179,38,30),.3); }
.pj-nz.warnung .material-symbols-rounded{ color:var(--scrm-kalt,#b3261e); }
.pj-nz b{ font-size:13.5px; }
.pj-nz p{ margin:2px 0 0; font-size:12px; color:var(--scrm-mut,#8a97a8); line-height:1.5; }
/* Die Notiz der Firma: ein Absatz, kein Wertepaar. */
.pj-fnotiz{ margin-top:8px; padding-top:8px; border-top:1px solid var(--scrm-linie,#e7eef6);
  font-size:12.5px; line-height:1.5; color:#41556d; white-space:pre-wrap; }

.pj-mhinweis{ margin-bottom:6px; font-size:11.5px; line-height:1.45; color:var(--scrm-mut,#8a97a8); }
.pj-modul{ all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%;
  padding:5px 6px; margin:0 -6px; border-radius:8px; font-size:12.5px; }
.pj-modul:hover{ background:#eef3f9; }
.pj-modul:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pj-modul span{ flex:1; min-width:0; color:var(--scrm-mut,#8a97a8); }
.pj-modul.bewertet span{ color:var(--text,#12233a); font-weight:600; }
.pj-mbalken{ flex:none; width:82px; height:6px; border-radius:3px; background:#eef3f9; overflow:hidden; }
.pj-modul:hover .pj-mbalken{ background:#e1e9f2; }
.pj-mbalken i{ display:block; height:100%; background:var(--accent); transition:width .14s; }

/* Das Modul-Auswahlfeld im Produktblatt der Suite — dort, nicht bei uns. */
.pj-mdd{ position:relative; display:inline-block; }
.pj-mddknopf{ all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  min-width:210px; padding:9px 10px 9px 12px; border-radius:10px; font-size:13px;
  color:var(--text,#12233a); box-shadow:inset 0 0 0 1px var(--scrm-linie,#e7eef6); background:#fff; }
.pj-mddknopf:hover{ box-shadow:inset 0 0 0 1px #cfdbe8; }
.pj-mddknopf[aria-expanded="true"]{ box-shadow:inset 0 0 0 2px var(--accent); }
.pj-mddknopf:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pj-mddtext{ flex:1; min-width:0; text-align:left; font-weight:600; }
.pj-mddknopf .material-symbols-rounded{ font-size:18px; color:var(--scrm-mut,#8a97a8); }
.pj-mddknopf[aria-expanded="true"] .material-symbols-rounded:last-child{ transform:rotate(180deg); }
/* Schwebt ueber dem Blatt, damit es nichts verschiebt. */
.pj-mddfeld{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; min-width:100%;
  width:264px; max-height:320px; overflow-y:auto; padding:6px; background:#fff;
  border-radius:14px; box-shadow:0 10px 26px rgba(18,35,58,.17), 0 0 0 1px var(--scrm-linie,#e7eef6); }
.pj-mddzeile{ display:flex; align-items:center; gap:6px; padding:6px 6px 6px 10px;
  border-radius:8px; font-size:12.5px; color:#41556d; }
.pj-mddzeile:hover{ background:#f3f7fb; }
.pj-mddzeile span{ flex:1; min-width:0; }
.pj-mddzeile button{ all:unset; cursor:pointer; flex:none; width:22px; height:22px;
  border-radius:50%; display:grid; place-items:center; color:#8a97a8; }
.pj-mddzeile button:hover{ background:#e4ecf4; color:var(--scrm-kalt,#b3261e); }
.pj-mddzeile button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pj-mddzeile .material-symbols-rounded{ font-size:15px; }
.pj-mddleer{ padding:10px 10px 8px; font-size:12.5px; color:var(--scrm-mut,#8a97a8); }
/* Die Zeile zum Anlegen klebt unten an der Liste. */
.pj-mddneu{ display:flex; align-items:center; gap:4px; margin-top:4px; padding:4px 6px 2px;
  border-top:1px solid var(--scrm-linie,#e7eef6); }
.pj-mddneu .material-symbols-rounded{ font-size:17px; color:var(--accent); }
.pj-mddneu input{ all:unset; flex:1; min-width:0; padding:6px 4px; font-size:12.5px;
  color:var(--text,#12233a); }
.pj-mddneu input::placeholder{ color:var(--scrm-mut,#8a97a8); }

/* ---------- Leer ---------- */
.pj-leer{ display:grid; place-content:center; justify-items:center; gap:8px; padding:70px 20px; text-align:center; }
.pj-leer .material-symbols-rounded{ font-size:34px; color:var(--scrm-mut,#8a97a8); }
.pj-leer b{ font-size:15.5px; }
.pj-leer p{ margin:0; max-width:44ch; font-size:13px; color:var(--scrm-mut,#8a97a8); line-height:1.6; }

/* ============================================================
   Projekt anlegen und bearbeiten (Dialog)
   ============================================================ */
.pj-listenkopf{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 0 12px; font-size:12.5px; color:var(--scrm-mut,#8a97a8);
}
.pj-tun{
  all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px;
  padding:9px 15px; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#fff; font-size:13px; font-weight:700;
}
.pj-tun:hover{ filter:brightness(1.06); }
.pj-tun:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pj-tun .material-symbols-rounded{ font-size:17px; }
.pj-leer .pj-tun{ margin-top:18px; }

.pj-kbearb{
  all:unset; cursor:pointer; margin-left:auto; width:34px; height:34px;
  border-radius:10px; display:grid; place-items:center; color:var(--scrm-mut,#8a97a8);
}
.pj-kbearb:hover{ background:#eef3f9; color:var(--text,#12233a); }
.pj-kbearb:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* Der Dialog liegt ueber dem Bereich, nicht ueber der ganzen Seite:
   die Suite hat ihre eigene Kopfzeile, und die soll sichtbar bleiben. */
.pj-dlgraum{
  position:absolute; inset:0; z-index:70; display:grid; place-items:center;
  padding:24px 16px; overflow-y:auto; background:rgba(18,35,58,.34);
}
.pj-dlg{
  width:min(520px,100%); padding:20px 22px 18px; background:#fff;
  border-radius:14px; box-shadow:0 22px 56px rgba(8,30,60,.3);
}
.pj-dlgkopf{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; font-size:16px;
}
.pj-dlgkopf button{
  all:unset; cursor:pointer; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; color:var(--scrm-mut,#8a97a8);
}
.pj-dlgkopf button:hover{ background:#f3f7fb; }

.pj-dlgfeld{ display:block; margin-bottom:12px; }
.pj-dlgfeld > span{
  display:block; margin-bottom:5px; font-size:12px; color:var(--scrm-mut,#8a97a8);
}
.pj-dlgfeld input, .pj-dlgfeld select, .pj-dlgfeld textarea{
  width:100%; box-sizing:border-box; padding:9px 11px;
  border:1.5px solid var(--scrm-linie,#e7eef6); border-radius:10px;
  background:#fff; font:inherit; font-size:13.5px; color:var(--text,#12233a);
}
.pj-dlgfeld textarea{ resize:vertical; min-height:52px; }
.pj-dlgfeld input:focus, .pj-dlgfeld select:focus, .pj-dlgfeld textarea:focus{
  outline:0; border-color:var(--accent);
}
.pj-dlgzwei{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.pj-dlghin{
  padding:10px 12px; border-radius:10px; background:#f3f7fb;
  font-size:12.5px; line-height:1.5; color:var(--scrm-mut,#8a97a8);
}
.pj-dlgch{ display:flex; flex-direction:column; gap:4px; max-height:168px; overflow-y:auto; }
.pj-dlgcheck{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 10px; border-radius:10px; cursor:pointer; font-size:13px;
}
.pj-dlgcheck:hover{ background:#f3f7fb; }
.pj-dlgcheck.an{ background:rgba(var(--accent-rgb),.09); }
.pj-dlgcheck .material-symbols-rounded{ font-size:19px; color:var(--scrm-mut,#8a97a8); }
.pj-dlgcheck.an .material-symbols-rounded{ color:var(--accent); }
.pj-dlgcheck span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-dlgcheck i{ font-style:normal; font-size:12px; color:var(--scrm-mut,#8a97a8); }

.pj-dlgfehler{ margin:4px 0 0; font-size:12.5px; color:var(--scrm-kalt,#b3261e); }

.pj-dlgfuss{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--scrm-linie,#e7eef6);
}
.pj-dlgfuss > div{ display:flex; gap:8px; margin-left:auto; }
.pj-dlgab{
  all:unset; cursor:pointer; padding:9px 14px; border-radius:10px;
  font-size:13px; color:var(--scrm-mut,#8a97a8);
}
.pj-dlgab:hover{ background:#f3f7fb; color:var(--text,#12233a); }
.pj-dlgweg{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  padding:9px 12px; border-radius:10px; font-size:13px; color:var(--scrm-kalt,#b3261e);
}
.pj-dlgweg:hover{ background:rgba(179,38,30,.08); }
.pj-dlgweg .material-symbols-rounded{ font-size:17px; }

@media (max-width:560px){
  .pj-dlgzwei{ grid-template-columns:1fr; }
}

/* Einen Deal aus dem Dialog heraus anlegen. */
.pj-dlgneuch{ display:flex; gap:6px; margin-top:6px; }
.pj-dlgneuch input{
  box-sizing:border-box; padding:8px 10px; border:1.5px dashed var(--scrm-linie,#e7eef6);
  border-radius:10px; background:#fff; font:inherit; font-size:13px; color:var(--text,#12233a);
}
.pj-dlgneuch input:first-child{ flex:1; min-width:0; }
.pj-dlgneuch input:nth-child(2){ width:104px; flex:none; }
.pj-dlgneuch input:focus{ outline:0; border-style:solid; border-color:var(--accent); }
.pj-dlgchneu{
  all:unset; flex:none; width:38px; cursor:pointer; border-radius:10px;
  display:grid; place-items:center; color:var(--accent);
  box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.45);
}
.pj-dlgchneu:hover{ background:rgba(var(--accent-rgb),.09); }
.pj-dlgchneu:disabled{ opacity:.45; cursor:default; }
.pj-dlgchneu .material-symbols-rounded{ font-size:19px; }

/* ============================================================
   Neuer Deal: die Unternehmenswahl (deal-neu.js)

   Sitzt im Schub der CRM-Maschine und borgt sich deren Felder
   (m3-field, m3-chip). Eigen ist nur, was es dort nicht gibt:
   die Vorschlagsliste und die gewaehlte Firma.
   ============================================================ */
.dn-vorschlaege { display: grid; gap: 2px; margin-top: 2px; }
.dn-vorschlaege:empty { display: none; }

.dn-vor {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius:10px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--tinte, #12233a);
  text-align: left;
  cursor: pointer;
}
.dn-vor:hover { background: #eef4fb; }
.dn-vor .material-symbols-rounded { font-size: 19px; color: #8a97a8; flex: none; }
.dn-vor span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-vor em { font-style: normal; font-size: 12px; color: #8a97a8; flex: none; }
/* Anlegen sieht anders aus als auswaehlen: es ist die Handlung
   mit Folgen, und wer sie uebersieht, hat die Firma doppelt. */
.dn-vor.neu { color: #1e599d; }
.dn-vor.neu .material-symbols-rounded { color: #1e599d; }

.dn-gewaehlt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 13px;
  border: 1.5px solid #cfe0f1;
  border-radius:10px;
  background: #f3f8fd;
}
.dn-gewaehlt > .material-symbols-rounded { color: #1e599d; flex: none; }
.dn-gewaehlt > div { flex: 1; min-width: 0; }
.dn-gewaehlt b { display: block; font-size: 14.5px; font-weight: 700; }
.dn-gewaehlt small { display: block; font-size: 12px; color: #64748b; }

.dn-unter { margin: 5px 2px 0; font-size: 11.5px; line-height: 1.4; color: #8a97a8; }

.dn-hinweis {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff6ec;
  font-size: 12.5px;
  line-height: 1.45;
  color: #8a5115;
}
.dn-hinweis .material-symbols-rounded { font-size: 19px; flex: none; }

.dn-leer { padding: 9px 11px; font-size: 12.5px; color: #8a97a8; }

/* ============================================================
   Bedienen statt nur ansehen (deal.js)
   ============================================================ */

/* Der kleine Knopf in einer Abschnittsueberschrift. */
.pj-zubtn {
  margin-left: 8px;
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
}
.pj-zubtn:hover { background: #e8eff8; color: #1e599d; }
.pj-zubtn .material-symbols-rounded { font-size: 18px; }

/* Der Sprung zum Kontakt sitzt IN der Personenzeile. Er zeigt sich
   erst beim Darueberfahren: sonst stuende neben jedem Namen ein
   Symbol, und die Zeile liest sich schlechter. */
.pj-zukontakt {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9fb0c4;
  cursor: pointer;
  opacity: 0;
}
.pj-person:hover .pj-zukontakt { opacity: 1; }
.pj-zukontakt:hover { background: #e8eff8; color: #1e599d; }
.pj-zukontakt:focus-visible { opacity: 1; outline: 2px solid #1e599d; outline-offset: 1px; }
.pj-zukontakt .material-symbols-rounded { font-size: 16px; }

/* Die ganze Zeile fuehrt zum Bearbeiten — das muss man sehen. */
.pj-person[data-pjrunde] { cursor: pointer; }

/* ---------- Wunsch aufnehmen ---------- */
.pj-wunschleer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 11px;
  border-radius:10px;
  background: #fff6ec;
  font-size: 12px;
  line-height: 1.45;
  color: #8a5115;
}
.pj-wunschleer .material-symbols-rounded { font-size: 18px; flex: none; }

/* ---------- Worum es geht: das Produkt ---------- */
.pj-produktband {
  margin: 0 0 14px;
  padding: 13px 15px 14px;
  background: #fff;
  border: 1px solid #e7eef6;
  border-radius:14px;
}
.pj-produktband .pj-abschnitt { margin-bottom: 10px; }

.pj-prodliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pj-prod { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pj-prodic {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(var(--pr-rgb, 26, 155, 219), .12);
  color: var(--pr, #1a9bdb);
}
.pj-prodmitte { min-width: 0; }
.pj-prodmitte b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-prodmitte small { display: block; font-size: 12px; color: #64748b; }

.pj-prodleer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
}
.pj-prodleer > .material-symbols-rounded { font-size: 20px; color: #9fb0c4; flex: none; }
.pj-prodleer span { flex: 1; min-width: 0; }
.pj-tun.klein { padding: 7px 11px; font-size: 13px; flex: none; }

/* ---------- Aus der Anforderungs-Bibliothek waehlen ----------
   Die Auswahl selbst liegt im Blatt (anfBlattAuf). Hier steht
   nur noch, warum gerade nichts zu holen ist. */

.pj-bibleer {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #e7eef6;
  font-size: 12px;
  color: #8a97a8;
  line-height: 1.45;
}


/* ---------- Die Auswahlfelder im Blatt ----------
   Material Design 3 braucht Luft nach oben: das Etikett sitzt
   AUF der Oberkante des Rahmens, und ein Nachbar mit zu wenig
   Abstand schneidet es an. 18 Pixel reichen fuer die 12-Pixel-
   Schrift des hochgefahrenen Etiketts.

   Den Hintergrund fuer die Luecke im Rahmen gibt der Dialog vor:
   steht das Feld auf einer anderen Flaeche als Weiss, muss
   --m3-field-bg mitwandern, sonst liegt das Etikett auf einem
   weissen Balken. */
.crs-dlg .pj-m3feld { margin: 18px 0; }
.crs-dlg .pj-m3feld + .pj-m3feld { margin-top: 20px; }

/* ============================================================
   Die drei Kacheln, je nach Frage anders gezeichnet
   (previews/deal-kacheln-smart.html, Flos Mischung:
    Wünsche = Stimmen, Anforderungen = Ampel, Module = Balken)
   ============================================================ */

/* ---------- Wünsche: Stimmen ----------
   Ein Wunsch gehört zu EINER Person. Die steht vorn, mit demselben
   Kürzel und derselben Farbe wie in der Kaufrunde daneben. */
.pj-stimme { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.pj-stimme + .pj-stimme { border-top: 1px solid #f1f5fa; }
.pj-skopf {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}
.pj-smitte { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.pj-smitte small { display: block; font-size: 11.5px; color: #8a97a8; }
.pj-swicht {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius:999px;
}
.pj-swicht.killer  { background: #fdeceb; color: #b3261e; }
.pj-swicht.wichtig { background: #fff6ec; color: #c2691a; }
.pj-swicht.nett    { background: #e7f5ee; color: #0e7c6b; }

/* ---------- Anforderungen: Ampel ----------
   Hier zählt das Muster, nicht der Einzelne. Der Punkt färbt nach
   ZUSTAND: orange heißt noch ungeprüft, und das ist das, was
   Arbeit macht. */
.pj-ampel { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; }

/* Das Kreuz an Wunsch und Anforderung.

   Es zeigt sich erst beim Überfahren: in beiden Kästen stehen bis
   zu acht Zeilen untereinander, und acht Kreuze daneben wären eine
   Spalte, die man liest, ohne sie zu brauchen. Mit Tastatur ist es
   über :focus-visible erreichbar, auf Tastgeräten steht es immer
   da — dort gibt es kein Überfahren.

   Dieselbe Tracht wie .pj-mweg an den Maßnahmen. Nicht dieselbe
   Klasse: deren Sichtbarkeit hängt an .pj-mz, und das ist die
   Maßnahmen-Zeile. */
.pj-zweg {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #9aa8b8;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s;
}
.pj-zweg .material-symbols-rounded { font-size: 16px; }
.pj-stimme:hover .pj-zweg,
.pj-ampel:hover .pj-zweg,
.pj-zweg:focus-visible { opacity: 1; }
.pj-zweg:hover { color: #b3261e; }
@media (hover: none) { .pj-zweg { opacity: 1; } }
.pj-ampel + .pj-ampel { border-top: 1px solid #f1f5fa; }
.pj-apunkt { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.pj-apunkt.offen  { background: #c2691a; }
.pj-apunkt.laeuft { background: #1a9bdb; }
.pj-apunkt.fertig { background: #0e7c6b; }
.pj-apunkt.kalt   { background: #cbd5e1; }
.pj-amitte { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; }
.pj-amitte small { display: block; font-size: 11.5px; color: #8a97a8; }
.pj-amarke {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius:999px;
}
.pj-amarke.offen  { background: #fff6ec; color: #c2691a; }
.pj-amarke.laeuft { background: #e8f4fb; color: #0d6a99; }
.pj-amarke.fertig { background: #e7f5ee; color: #0e7c6b; }
.pj-amarke.kalt   { background: #eef2f7; color: #8a97a8; }

/* ---------- Module: Balken ----------
   Der Balken trennt die Stufen deutlicher als eine Färbung — man
   vergleicht Längen ohne Legende. Das Wort daneben nennt sie
   trotzdem: ein Balken allein sagt nicht, ob 66 % viel ist. */
.pj-modul { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.pj-mname { font-size: 13px; }
.pj-mstufe { font-size: 11.5px; color: #8a97a8; white-space: nowrap; }
.pj-modul .pj-mbalken { grid-column: 1 / -1; }

/* ---------- Die mittlere Spalte reicht bis unten ----------
   .pj-raster steht auf align-items:start, also ist jede Spalte nur
   so hoch wie ihr Inhalt. Gemessen: rechts 1322 Pixel, Mitte 281 —
   die Reiterleiste hing oben in der Luft, und darunter war nichts.

   align-self:stretch gibt der Mitte die Hoehe der Zeile, also die
   der hoechsten Spalte. Damit der Verlauf den gewonnenen Platz auch
   FUELLT und nicht nur darin steht, wird die Spalte eine
   Flex-Saeule: Reiterleiste fest, Verlauf nimmt den Rest.

   max-height muss dafuer weg. Die Angabe war die alte Loesung fuer
   dasselbe Problem von der anderen Seite — sie deckelte den Kasten,
   statt ihn zu fuellen, und haette jetzt dagegengehalten. */
.pj-mitte {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pj-mitte .pj-reiter { flex: none; }
/* Die Buehne: der Bezugsrahmen der Schublade und ihr Schnitt.
   Ohne overflow:hidden faehrt die Schublade sichtbar neben der
   Spalte herum, statt aus deren Kante zu kommen. */
.pj-mbuehne {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pj-mitte .pj-verlauf {
  flex: 1;
  min-height: 0;
  max-height: none;
}

/* Auf schmalen Schirmen stehen die Spalten untereinander. Dort
   waere eine mitgewachsene Mitte eine lange leere Flaeche. */
@media (max-width: 1250px) {
  .pj-mitte { align-self: start; display: block; }
  .pj-mitte .pj-verlauf { max-height: min(58vh, 540px); }
}

/* ============================================================
   Entwurf 6 aus previews/deal-seite-verlauf-links.html

   Links wer und was bisher geschah, in der Mitte ein Kanal im
   Detail, rechts worum es geht. Der Verlauf steht links als
   senkrechte Spur: oben das Neueste, nach unten zurück.
   ============================================================ */
/* Die linke Spalte reicht bis unten, genau wie die mittlere.
   align-self:stretch gibt ihr die Hoehe der hoechsten Spalte;
   grid-template-rows:auto 1fr teilt sie auf: die Kaufrunde so
   hoch, wie sie ist, der Verlauf nimmt den ganzen Rest.

   align-content darf dabei NICHT auf start stehen — das hiesse
   "alle Zeilen oben zusammen" und das 1fr waere wirkungslos. */
.pj-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  align-self: stretch;
  min-height: 0;
}
/* Der Verlaufskasten muss den gewonnenen Platz auch FUELLEN und
   nicht nur darin stehen: Titelzeile fest, Spur nimmt den Rest
   und scrollt in sich. */
.pj-links > .pj-kasten.zu { align-self: start; }
.pj-links > .pj-kasten:last-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pj-links > .pj-kasten:last-child > .pj-kinhalt {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Ein Knopf in der Überschrift eines Kastens. */
.pj-ktitel .pj-zubtn { margin-left: auto; }

/* ---------- Kaufrunde: kompakte Karte ----------
   Alle vier Angaben je Person. Der Balken an der Unterkante trägt
   das Gewicht ein zweites Mal, als Länge — vier Prozentzahlen
   vergleicht man nicht im Kopf, vier Längen schon. Seine Farbe
   sagt die Haltung: ein langer roter Balken ist das Problem
   dieses Deals. */
/* Zwei Spalten. Vier Kacheln stehen ganz da, von der dritten
   Reihe bleibt ein Streifen sichtbar — genau daran erkennt man,
   dass es weitergeht.

   Die Hoehe ist gemessen, nicht geraten: eine Kachel ist 99,8
   Pixel hoch (in der 322 Pixel breiten Spalte der Dealseite), zwei
   Reihen und eine Luecke sind 209, dazu eine halbe Kachel. */
.pj-krliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  /* Zwei Reihen ganz, von der dritten ein Streifen — daran
     erkennt man, dass es weitergeht. Bei 71 Pixel Kachelhoehe
     sind das 71 + 7 + 71 + 7 + 35. */
  max-height: 191px;
  overflow-y: auto;
}
/* Die Kachel: alles untereinander und mittig. Mittig, weil die
   Spalte zu schmal ist, um Namen unterschiedlicher Laenge an
   einer Kante auszurichten — links haette jede Kachel eine
   andere optische Mitte. */
.pj-krz {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding: 7px 6px 9px;
  border: 1px solid #e7eef6;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.pj-krz:hover { border-color: #1e599d; }
.pj-krz:hover .pj-zukontakt { opacity: 1; }
/* Der Sprung zum Kontakt sitzt in der UNTEREN Ecke: oben steht
   jetzt das Gewicht, und ein Symbol daneben wuerde es beim
   Darueberfahren verdecken. */
.pj-krz .pj-zukontakt { position: absolute; bottom: 2px; right: 1px; }
/* Kuerzel und Gewicht nebeneinander — die beiden teilen sich die
   Zeile, die das Kuerzel ohnehin braucht. */
.pj-krkopf { display: flex; align-items: center; gap: 7px; }
.pj-krav {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
/* EINE Zeile. Vorher waren es zwei fest zugeteilte — damit die
   Kacheln einer Reihe gleich hoch bleiben, nicht weil zwei
   gebraucht wuerden: bei den meisten Namen blieb die zweite
   leer und kostete trotzdem 14 Pixel in jeder Kachel.

   Gekuerzt wird mit Auslassungszeichen, der ganze Name steht im
   title. Wer die Spalte breiter zieht, sieht mehr. */
.pj-krn {
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pj-krr {
  min-width: 0;
  font-size: 10.5px;
  color: #8a97a8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Haltung und Rolle in einer Zeile. Wird es eng, weicht die
   Rolle: die Haltung ist das Wort, das zaehlt, und sie steht
   ausserdem noch als Farbe im Balken. */
.pj-krfuss { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; max-width: 100%; }
.pj-krw { flex: none; font-size: 12.5px; font-weight: 800; }
.pj-krw.vorschlag { color: #8a97a8; font-weight: 700; }
.pj-krh {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius:999px;
}
.pj-krh .material-symbols-rounded { font-size: 11px; }
.pj-krh.gut  { background: #e7f5ee; color: #0e7c6b; }
.pj-krh.neu  { background: #eef2f7; color: #8a97a8; }
.pj-krh.kalt { background: #fdeceb; color: #b3261e; }
/* Die Stille als Ecke oben links. Orange, klein, und nur da,
   wenn es sie gibt. */
.pj-krstill {
  position: absolute;
  top: 4px;
  left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 10.5px;
  font-weight: 700;
  color: #c2691a;
}
.pj-krstill .material-symbols-rounded { font-size: 12px; }
/* Der Balken sitzt AUF der Unterkante, nicht darunter: so bleibt
   die Karte so hoch wie ohne ihn. */
.pj-krbalken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f1f5fa; }
.pj-krbalken i { display: block; height: 100%; }
.pj-krbalken.gut i  { background: #0e7c6b; }
.pj-krbalken.neu i  { background: #9fb0c4; }
.pj-krbalken.kalt i { background: #b3261e; }

/* ---------- Der Verlauf als senkrechte Spur ----------
   Die Linie läuft durch, die Punkte sitzen darauf. Sie endet am
   letzten Punkt, nicht am Kastenrand — sonst sieht es aus, als
   fehle noch etwas. */
/* Kein max-height mehr: der Kasten gibt die Hoehe vor, und die
   kommt jetzt von der Spalte. Ein Deckel daneben haette
   dagegengehalten — derselbe Fehler wie seinerzeit in .pj-mitte. */
/* ---------- Der Verlauf ----------
   Entwurf 5 aus previews/verlauf-schmal.html: eine Zeile je
   Eintrag an einer Verlaufslinie, Einzelheiten auf Klick, und
   beim Ueberfahren ein Schwebefenster mit allem.

   KEINE KARTEN. Die Linie laeuft hinter den Eintraegen durch —
   haette jeder einen weissen Grund mit Rahmen, waere sie nur in
   den Luecken dazwischen zu sehen. Sichtbar wird ein Eintrag
   beim Ueberfahren und solange er offen ist. */
.pj-spur {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0;
}
.pj-spur::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: linear-gradient(var(--scrm-linie, #e7eef6), #f1f6fb);
  border-radius: 1px;
}

.pj-sz { position: relative; border-radius: 10px; }
.pj-sz.auf { background: #f7fafd; }
.pj-szeile {
  display: grid;
  /* Die Spalte fuer das Auge steht IMMER da, auch wenn der Knopf
     unsichtbar ist: taucht sie erst beim Ueberfahren auf, rutscht
     der Betreff unter dem Zeiger weg. */
  grid-template-columns: 26px minmax(0, 1fr) 22px 16px;
  gap: 7px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.pj-szeile:hover { background: rgba(var(--accent-rgb), .07); }

/* Das Auge: oeffnet das Fenster mit allem. Ein Knopf statt des
   Ueberfahrens — der hat einen Rand, den man sieht und trifft. */
.pj-saug {
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius:8px;
  background: rgba(var(--accent-rgb), .13);
  color: var(--accent-dark, #0d6a99);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.pj-saug .material-symbols-rounded { font-size: 15px; }
.pj-szeile:hover .pj-saug { opacity: 1; }
.pj-saug:hover { background: rgba(var(--accent-rgb), .24); }
.pj-saug:focus-visible { opacity: 1; outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 1px; }
/* Ohne Maus gibt es kein Ueberfahren — am Tablet also immer da. */
@media (hover: none) { .pj-saug { opacity: 1; } }

/* Das Symbol sitzt AUF der Linie und muss sie verdecken: ohne
   den Ring liefe sie quer hindurch. Die Ringfarbe ist die des
   Untergrunds, also im offenen Zustand eine andere. */
.pj-ksym {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: #eef3f9; color: #41556d;
  box-shadow: 0 0 0 3px #fff;
}
.pj-sz.auf .pj-ksym { box-shadow: 0 0 0 3px #f7fafd; }
.pj-ksym .material-symbols-rounded { font-size: 16px; }
.pj-ksym.anruf   { background: #e8f4fb; color: #0d6a99; }
.pj-ksym.mail    { background: #fff6ec; color: #c2691a; }
.pj-ksym.termin  { background: #e7f5ee; color: #0e7c6b; }
.pj-ksym.notiz   { background: #f3f0fb; color: #6d4fc4; }
.pj-ksym.angebot { background: #fdeceb; color: #b3261e; }

/* Die Richtung als Abzeichen am Symbol statt als Wort: in 225
   Pixeln ist jedes gesparte Wort eines. */
.pj-kabz {
  position: absolute; right: -4px; bottom: -4px;
  width: 14px; height: 14px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
}
.pj-sz.auf .pj-kabz { box-shadow: 0 0 0 2px #f7fafd; }
.pj-kabz .material-symbols-rounded { font-size: 9px; }
.pj-kabz.raus { background: rgba(var(--accent-rgb), .16); color: var(--accent-dark, #b4631f); }
.pj-kabz.rein { background: #e4f0e6; color: #3f6b48; }

.pj-smitte { min-width: 0; }
.pj-kbetreff { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-sdat { font-size: 10.5px; color: #9aa8b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-schev { display: grid; place-items: center; color: #9aa8b8; transition: transform .16s ease; }
.pj-schev .material-symbols-rounded { font-size: 17px; }
.pj-sz.auf .pj-schev { transform: rotate(180deg); }

/* Eingerueckt bis hinter die Linie: das Ausgeklappte gehoert
   sichtbar zum Eintrag darueber, nicht zur Liste. */
.pj-smehr { display: none; padding: 2px 10px 10px 45px; }
.pj-sz.auf .pj-smehr { display: block; }
.pj-kpaar { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 7px; align-items: center; }
.pj-kschild { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9aa8b8; }
.pj-kpers { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: #41556d; }
.pj-knm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-kleer { font-size: 11.5px; color: #c3cedb; }
.pj-kav { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 8.5px; font-weight: 700; color: #fff; flex: none; }
.pj-stxt { margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: #7b8a9c; }

/* ---------- Das Schwebefenster ----------
   Haengt am body, nicht in der Spur: die hat overflow-y:auto und
   wuerde es an ihrem Rand abschneiden — dabei soll es gerade
   NEBEN ihr stehen. Darum fest positioniert, die Stelle rechnet
   deal.js aus.

   Der z-index liegt ueber dem Dialogfeld der Suite (1400) und
   unter der Sendemaske (1600). */
.pj-schwebe {
  position: fixed;
  z-index: 1500;
  /* Ziehbar. resize braucht overflow ungleich visible und eine
     Groesse, an der es ansetzen kann — min/max halten es in
     brauchbaren Grenzen. Die gezogene Groesse merkt sich deal.js
     im localStorage. */
  width: 330px;
  height: auto;
  min-width: 260px;
  max-width: 90vw;
  min-height: 150px;
  max-height: 85vh;
  /* Nicht das ganze Fenster rollt, nur der Rumpf: das X sitzt
     oben rechts und muss bei einer langen Mail erreichbar
     bleiben. Geschlossen wird ausschliesslich darueber. */
  /* border-box, damit die Grenzen das meinen, was man sieht: die
     gemerkte Groesse kommt aus getBoundingClientRect, also mit
     Polster. Als content-box wuchs der Kasten bei jedem Oeffnen um
     diese 28 Pixel weiter — gemessen 674 statt 646 bei 85vh. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  padding: 13px 15px 15px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px -14px rgba(16, 42, 72, .34), 0 0 0 1px var(--scrm-linie, #e7eef6);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .13s ease, transform .13s ease;
}
.pj-schwebe.da { opacity: 1; transform: none; }

/* Das X. Liegt ausserhalb des rollenden Rumpfs und bleibt darum
   immer an derselben Stelle. */
.pj-swzu {
  position: absolute; top: 9px; right: 9px;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: #f1f5fa; color: #5b6b80;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.pj-swzu .material-symbols-rounded { font-size: 17px; }
.pj-swzu:hover { background: #e3eaf3; color: #1f2d3f; }
.pj-swzu:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 1px; }

/* Platz fuer das X: ohne den liegt es auf der Zeitangabe. */
.pj-swkopf { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
/* Nur der Rumpf rollt, und er darf dabei schrumpfen —
   min-height:0, sonst waechst ein Flex-Kind ueber den Kasten
   hinaus und rollt nie. */
.pj-swrumpf { flex: 1; min-height: 0; overflow-y: auto; }
.pj-swart { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.pj-swri {
  padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.pj-swri.raus { background: rgba(var(--accent-rgb), .14); color: var(--accent-dark, #b4631f); }
.pj-swri.rein { background: #e4f0e6; color: #3f6b48; }
.pj-swzeit { font-size: 11px; color: #9aa8b8; margin-top: 1px; }
.pj-swbetreff { margin: 11px 0 9px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.pj-swpaar {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 5px 8px; align-items: center;
  padding: 9px 11px; border-radius: 10px; background: #f6f9fc;
}
.pj-swpaar .pj-kpers span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-swrumpf { min-height: 20px; }
.pj-swtext { margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: #41556d; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-swleer { margin: 11px 0 0; font-size: 12px; font-style: italic; color: #9aa8b8; }
.pj-swlaedt { margin: 11px 0 0; font-size: 12px; color: #9aa8b8; display: flex; align-items: center; gap: 7px; }
.pj-swlaedt .material-symbols-rounded { font-size: 15px; }
/* .pj-spunkt, .pj-stitel, .pj-sdatum, .pj-swer, .pj-stext und
   .pj-srich sind mit der Zeitleiste entfallen. Nicht nur
   auskommentiert: eine tote Regel mit zwei Klassen schlaegt
   spaeter eine lebende mit einer, und das hat hier schon zweimal
   eine Stunde gekostet (siehe .pj-skopf weiter unten). */

/* ---------- Notiz schreiben ---------- */
.pj-schreib { display: grid; gap: 8px; margin-bottom: 12px; }
.pj-schreib textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid #e2eaf3;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  color: #12233a;
}
.pj-schreib textarea:focus { outline: 0; border-color: #1a9bdb; box-shadow: 0 0 0 3px rgba(26,155,219,.14); }
.pj-schreibfuss { display: flex; align-items: center; gap: 8px; }
.pj-schreibfuss .pj-luecke { flex: 1; }

/* Was ehrlich gesagt werden muss, statt einer Fläche, die nichts
   annimmt. */
.pj-nochnicht {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius:10px;
  background: #fff6ec;
  font-size: 12px;
  line-height: 1.45;
  color: #8a5115;
}
.pj-nochnicht .material-symbols-rounded { font-size: 17px; flex: none; }

/* Der Hinweis unter der Kaufrunde klebte an der letzten Karte.
   Derselbe Abstand wie zwischen den Karten (7px), nicht mehr:
   er gehoert zur Liste, er ist kein neuer Abschnitt. */
.pj-links .pj-krliste + .pj-luecke { margin-top: 7px; }

/* ============================================================
   Anruf protokollieren

   Flach und hell wie der Rest der Suite. Die Auswahl zeigt sich
   am Rand und an der Flaeche, nicht an einem Haken: wer die
   Maske ueberfliegt, soll in einem Blick sehen, was eingestellt
   ist, ohne drei Kontrollkaestchen zu lesen.
   ============================================================ */
.pj-anruf {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  background: #f7fafd;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 14px;
}
.pj-akopf { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pj-akopf .material-symbols-rounded { font-size: 18px; color: var(--accent); }

/* Die Richtung ist fast immer ausgehend. Darum ein Umschalter in
   der Kopfzeile und kein eigenes Feld: er kostet keinen Platz,
   solange niemand ihn braucht. */
.pj-arichtung {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  color: #41556d;
  cursor: pointer;
}
.pj-arichtung .material-symbols-rounded { font-size: 15px; }
.pj-arichtung:hover { border-color: var(--accent); color: var(--accent); }

.pj-afeld { display: grid; gap: 7px; min-width: 0; }
.pj-afeld > label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--scrm-mut, #8a97a8);
}

/* Wen: Karten statt Aufklappfeld. Ein Gesicht und "vor 14 Tagen"
   erkennt man schneller als einen Namen in einer Liste — und man
   sieht nebenbei, wen man zu lange nicht angerufen hat. */
.pj-awerliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; }
.pj-awer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius:10px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pj-awer:hover { border-color: #cfe0ee; }
.pj-awer.an { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pj-aav {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.pj-awertext { display: block; min-width: 0; }
.pj-awertext b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-awertext small {
  display: block;
  font-size: 10.5px;
  color: var(--scrm-mut, #8a97a8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-achips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-achip {
  padding: 6px 11px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #41556d;
  cursor: pointer;
}
.pj-achip.klein { padding: 5px 10px; font-size: 12px; }
.pj-achip:hover { border-color: #cfe0ee; }
.pj-achip .material-symbols-rounded { font-size: 15px; vertical-align: -3px; margin-right: 4px; }
.pj-achip.an {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent-dark, #c96a22);
  font-weight: 600;
}

.pj-aeigen {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #e2eaf3;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text, #12233a);
}
.pj-aeigen:focus { outline: 0; border-color: var(--accent); }

/* Der Ausgang faerbt sich, weil er die Maske umbaut: wer niemanden
   erreicht hat, bekommt weder Dauer noch "Besprochenes". */
.pj-aerglist { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-aerg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #41556d;
  cursor: pointer;
}
.pj-aerg .material-symbols-rounded { font-size: 16px; }
.pj-aerg:hover { border-color: #cfe0ee; }
.pj-aerg.erreicht.an { border-color: #0e7c6b; background: #e7f5ee; color: #0e7c6b; }
.pj-aerg.niemand.an  { border-color: #b3261e; background: #fdeceb; color: #b3261e; }
.pj-aerg.rueckruf.an { border-color: #2d6f94; background: #e8f4fb; color: #0d6a99; }

.pj-anruf textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid #e2eaf3;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text, #12233a);
}
.pj-anruf textarea:focus { outline: 0; border-color: var(--accent); }
.pj-afuss { display: flex; align-items: center; gap: 8px; }
/* .pj-luecke ist anderswo der getoente Hinweiskasten. Hier soll es
   nur schieben — also die Tracht zuruecknehmen, nicht eine zweite
   Klasse fuer dasselbe Nichts erfinden. */
.pj-afuss .pj-luecke { flex: 1; padding: 0; background: none; }

/* ============================================================
   Die Schublade

   Sie fährt von der RECHTEN KANTE DER MITTELSPALTE herein, nicht
   vom Fensterrand: die rechte Spalte mit Produkt, Maßnahmen und
   nächstem Schritt bleibt stehen. Genau das war Flos Bild vom
   30.10. — der rote Pfeil endet an dieser Kante.

   Breit genug für die Teilnehmerkarten (zwei nebeneinander ab
   etwa 390px), schmal genug, dass links davon noch Liste zu
   sehen ist. Auf engen Fenstern nimmt sie alles.
   ============================================================ */
.pj-schub {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--scrm-linie, #e7eef6);
  box-shadow: -14px 0 32px rgba(18, 35, 58, .11);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s .26s;
}
/* 101% statt 100%: bei krummen Breiten bleibt sonst ein Pixel
   des Schattens am Rand stehen. visibility verzögert, damit die
   geschlossene Schublade keine Klicks abfängt — sie liegt sonst
   unsichtbar über der rechten Hälfte der Liste. */
.pj-schub.an {
  transform: none;
  visibility: visible;
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

/* Der Schleier dunkelt nur die Liste ab, nicht die ganze Seite:
   rechts soll man weiterlesen können, worum es im Deal geht,
   während man das Protokoll tippt. */
.pj-schubscrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(18, 35, 58, .14);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s, visibility 0s .26s;
}
.pj-schub.an ~ .pj-schubscrim { opacity: 1; visibility: visible; transition: opacity .26s; }

.pj-schubkopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 10px 11px 15px;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
  font-size: 13.5px;
}
.pj-schubkopf > b { margin-right: auto; }
.pj-schubkopf > .material-symbols-rounded { font-size: 18px; color: var(--accent); }
/* Der Richtungsschalter sitzt im Kopf und hat dort schon einen
   Rand. Sein margin-left:auto aus der Anrufmaske würde das Kreuz
   wegschieben. */
.pj-schubkopf .pj-arichtung { margin-left: 0; }
.pj-schubzu {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #41556d;
  cursor: pointer;
}
.pj-schubzu:hover { background: #eef3f9; }
.pj-schubzu .material-symbols-rounded { font-size: 19px; }

.pj-schubleib { flex: 1; min-height: 0; overflow: auto; padding: 14px 15px 16px; }

/* In der Schublade ist die Maske kein eigener Kasten mehr: ein
   getönter Kasten mit Rand in einem weißen Kasten mit Rand sind
   zwei Ränder zu viel. */
.pj-schubleib .pj-anruf {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* Teilnehmer- und Wen-Karten: in 430px passen zwei nebeneinander,
   die 180px-Vorgabe der breiten Spalte läuft hier über. */
.pj-schubleib .pj-awerliste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* Der Öffner steht über der Liste, dort wo vorher die Maske
   anfing: linksbündig und in seiner eigenen Breite. */
.pj-schubauf { display: flex; justify-content: flex-start; margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pj-schub, .pj-schub.an, .pj-schubscrim { transition: none; }
}

/* ============================================================
   Meeting protokollieren

   Dieselbe Maske wie beim Anruf — sie trägt beide Klassen und
   erbt den ganzen Kasten. Nur zwei Dinge sind neu: die beiden
   schmalen Zeitfelder und die Liste darunter, in der ein
   Meeting mehr zeigt als eine Verlaufszeile.
   ============================================================ */

/* Datum und Uhrzeit nebeneinander, das Datum breiter. Nicht
   beide auf 1fr: ein Uhrzeitfeld, das so breit ist wie ein
   Datumsfeld, sieht aus wie ein Fehler. */
.pj-tpwann { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 7px; }

.pj-tpz {
  display: grid;
  gap: 7px;
  padding: 11px 0;
  border-bottom: 1px solid var(--scrm-linie, #e7eef6);
}
.pj-tpz:last-child { border-bottom: 0; }
/* Was noch aussteht, steht blasser da: die Liste wird von oben
   gelesen, und ein künftiges Meeting ist keine Nachricht über
   Geschehenes. */
.pj-tpz.kuenftig { opacity: .72; }

.pj-tpkopf { display: flex; align-items: center; gap: 11px; }
.pj-tpm { min-width: 0; flex: 1; }
.pj-tpm b { display: block; font-size: 13.5px; }
.pj-tpdat { margin-top: 2px; font-size: 11.5px; color: var(--scrm-mut, #8a97a8); }
.pj-tpsteht {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(45, 111, 148, .12);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2d6f94;
}

/* Die Teilnehmer: Kürzel plus Namen. Die Kürzel allein wären
   ein Rätsel, die Namen allein eine Zeile Text — zusammen
   erkennt man die Runde im Vorbeigehen und kann sie trotzdem
   lesen. */
.pj-tpwer { display: flex; align-items: center; gap: 6px; padding-left: 41px; min-width: 0; }
.pj-tpav {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.pj-tpwtext {
  min-width: 0;
  font-size: 11.5px;
  color: #41556d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-tptxt {
  margin: 0 0 0 41px;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: #41556d;
}
.pj-tptxt.leer { font-style: italic; color: var(--scrm-mut, #8a97a8); }

/* ============================================================
   Dateien an einem Deal

   Die Ablegeflaeche ist der einzige Ort auf dieser Seite mit
   einer gestrichelten Kante. Das ist Absicht: gestrichelt heisst
   ueberall "hier ist noch nichts, hier kann etwas hin", und
   dieselbe Form fuer etwas anderes zu benutzen waere die
   teuerste Art, Platz zu sparen.
   ============================================================ */
.pj-dablage { display: grid; gap: 12px; }

.pj-dzone {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 26px 18px;
  border: 1.5px dashed #c6d6e6;
  border-radius: 14px;
  background: #f7fafd;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.pj-dzone:hover, .pj-dzone:focus-visible { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.pj-dzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Waehrend etwas darueber schwebt: deutlich, aber ohne Sprung —
   eine Flaeche, die beim Hereinziehen die Groesse aendert, wandert
   unter dem Zeiger weg. Darum nur Farbe, keine Masse. */
.pj-dzone.drueber { border-color: var(--accent); border-style: solid; background: rgba(var(--accent-rgb), .1); }
.pj-dzoneic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent-dark, #c96a22);
}
.pj-dzoneic .material-symbols-rounded { font-size: 22px; }
.pj-dzone b { font-size: 13.5px; }
.pj-dzone small { font-size: 11.5px; color: var(--scrm-mut, #8a97a8); }
.pj-dzone u { text-decoration-color: var(--accent); cursor: pointer; }

/* Was gerade laeuft. Steht ueber der Liste, nicht darin: eine
   Datei, die noch unterwegs ist, ist noch keine Datei am Deal. */
.pj-dlauf:empty { display: none; }
.pj-dlauf { display: grid; gap: 6px; }
.pj-dlz {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius:10px;
  background: rgba(var(--accent-rgb), .08);
  font-size: 12.5px;
}
.pj-dlz .material-symbols-rounded { font-size: 18px; color: var(--accent-dark, #c96a22); flex: none; }
.pj-dlz b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-dlz small { margin-left: auto; color: var(--scrm-mut, #8a97a8); white-space: nowrap; }
.pj-dlz.fehler { background: #fdeceb; }
.pj-dlz.fehler .material-symbols-rounded { color: #b3261e; }
.pj-dlz.fehler small { color: #b3261e; }

.pj-dliste { display: grid; gap: 7px; }
.pj-dz {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius:10px;
  background: #fff;
}
.pj-dz:hover { border-color: #cfe0ee; }
.pj-dic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef3f9;
  color: #41556d;
}
.pj-dic .material-symbols-rounded { font-size: 19px; }
/* Die Farbe sagt die Art, bevor man den Namen liest. Nur fuer das,
   was im Vertrieb wirklich vorkommt — fuer alles andere bleibt es
   grau, und das ist auch eine Aussage. */
.pj-dic.pdf { background: #fdeceb; color: #b3261e; }
.pj-dic.doc, .pj-dic.docx, .pj-dic.odt, .pj-dic.rtf { background: #e8f1fb; color: #1b5ea8; }
.pj-dic.xls, .pj-dic.xlsx, .pj-dic.ods, .pj-dic.csv { background: #e7f5ee; color: #0e7c6b; }
.pj-dic.ppt, .pj-dic.pptx, .pj-dic.odp { background: #fff3e8; color: #c2691a; }
.pj-dic.png, .pj-dic.jpg, .pj-dic.jpeg, .pj-dic.gif, .pj-dic.webp,
.pj-dic.heic, .pj-dic.bmp, .pj-dic.tif, .pj-dic.tiff { background: #f3f0fb; color: #6d4fc4; }
.pj-dic.zip { background: #eef3f9; color: #41556d; }

.pj-dmitte { min-width: 0; flex: 1; }
.pj-dmitte b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-dmitte small { display: block; font-size: 11px; color: var(--scrm-mut, #8a97a8); }

.pj-dbtn {
  all: unset;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius:10px;
  color: var(--scrm-mut, #8a97a8);
  cursor: pointer;
}
.pj-dbtn .material-symbols-rounded { font-size: 18px; }
.pj-dbtn:hover { background: #eef3f9; color: #12233a; }
.pj-dbtn.weg:hover { background: #fdeceb; color: #b3261e; }
.pj-dbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Ein Eintrag aus der Workstation, hinter dem hier keine Datei
   liegt. Kein Knopf, der ins Leere greift — nur ein Zeichen. */
.pj-dalt { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: #c6d0da; }
.pj-dalt .material-symbols-rounded { font-size: 17px; }

/* ============================================================
   E-Mail am Deal
   ============================================================ */
.pj-mailbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 11px 13px;
  background: #f7fafd;
  border: 1px solid var(--scrm-linie, #e7eef6);
  border-radius: 14px;
}
.pj-mbtitel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--scrm-mut, #8a97a8);
}
.pj-mbtitel .material-symbols-rounded { font-size: 17px; color: var(--accent); }
.pj-mbwer { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pj-mbchip {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  font-size: 12.5px;
  color: #41556d;
  cursor: pointer;
}
.pj-mbchip:hover { box-shadow: inset 0 0 0 1px #cfe0ee; }
.pj-mbchip.an {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: rgba(var(--accent-rgb), .07);
  color: var(--accent-dark, #c96a22);
  font-weight: 600;
}
.pj-mbav {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
}
.pj-mailbar .pj-tun { margin-inline-start: auto; }

/* ---------- Nur die Sendemaske, nicht die ganze Mail-App ----------
   Geschrieben wird mit derselben Maske wie unter E-Mail. Die wohnt
   aber im Gast-Overlay der Mail-App, und das bringt Kopfzeile,
   Ordnerliste und Leseflaeche mit. Hier soll nur das Modal ueber
   der Dealseite liegen.

   !important, weil email-im-rahmen.css die Lage des Rahmens genauso
   setzt — ohne das gewaenne dort die spaetere Regel, und der Rahmen
   bliebe auf seinem eingerueckten Platz stehen.

   UND UEBER DER SUITE. #emailOverlay steht von Haus aus auf
   z-index 62. Das reicht, solange es die E-Mail-SEITE ist, denn
   dann liegt die Suite dahinter. Ueber der Dealseite aber steht
   #crsOverlay auf 1400 — und das Modal verschwand dahinter:
   richtig aufgebaut, Felder gefuellt, Animation durchgelaufen,
   nur unsichtbar. Gemessen mit elementFromPoint, nicht geraten.
   1600 liegt auch ueber den Dialogen der Suite (1500). */
#emailOverlay.pj-nurmaske { z-index: 1600; }
#emailOverlay.pj-nurmaske > .email-frame {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#emailOverlay.pj-nurmaske .email-topbar,
#emailOverlay.pj-nurmaske #emailApp > .em-layout { display: none !important; }
/* Der Rahmen faengt sonst Klicks ab, die neben dem Modal landen —
   und da liegt die Dealseite, die weiter bedienbar aussieht. Das
   Modal selbst nimmt sie wieder an. */
#emailOverlay.pj-nurmaske > .email-frame { pointer-events: none; }
#emailOverlay.pj-nurmaske .modal-overlay { pointer-events: auto; }

/* Absenderwahl in der Mailleiste. Ein echtes Auswahlfeld statt
   Chips: Postfaecher heissen oft aehnlich lang und sind selten
   mehr als drei — eine Reihe Chips waere breiter und sagte nicht
   mehr. */
.pj-mbvon {
  all: unset;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--scrm-linie, #e7eef6);
  font: inherit;
  font-size: 12.5px;
  color: #41556d;
  cursor: pointer;
  max-width: 230px;
  text-overflow: ellipsis;
}
.pj-mbvon:hover { box-shadow: inset 0 0 0 1px #cfe0ee; }
.pj-mbvon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- E-Mail-Tab auf der Kontaktseite ----------
   Der Tab benutzt .pj-mailbar von oben weiter: es ist dieselbe
   Leiste, nur mit einem Empfaenger statt einer Auswahl. Hier
   steht allein, was dort fehlt. Siehe web/kontakt-mail.js. */
.km-fest { cursor: default; }
.km-fest:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.km-leer, .km-hin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--scrm-mut, #8a97a8);
}
.km-leer { padding: 18px 2px; }
.km-leer .material-symbols-rounded,
.km-hin .material-symbols-rounded { font-size: 18px; flex: none; }
.km-hin b { font-weight: 650; color: #41556d; }

/* ---------- Maßnahmen ----------
   Entwurf aus previews/deal-massnahmen.html. Die Schritte eines
   Deals, nach Phasen gruppiert: in der Mitte zum Arbeiten, in der
   Spalte rechts nur der Stand. */
.pj-mliste { background: #fff; border: 1px solid var(--scrm-linie, #e7eef6); border-radius: 14px; overflow: hidden; }
.pj-mphase { border-bottom: 1px solid var(--scrm-linie, #e7eef6); }
.pj-mphase:last-child { border-bottom: 0; }
.pj-mpkopf { display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: #f8fbfd; }
.pj-mpkopf b { font-size: 12.5px; }
.pj-mpnr {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; background: #e4ecf5; color: #5b6b80; flex: none;
}
.pj-mpnr .material-symbols-rounded { font-size: 14px; }
.pj-mphase.fertig .pj-mpnr { background: #2f7d5b; color: #fff; }
.pj-mphase.laeuft .pj-mpnr { background: var(--accent, #1a9bdb); color: #fff; }
.pj-mpstand { margin-left: auto; font-size: 11px; color: #7b8a9c; font-variant-numeric: tabular-nums; }

.pj-mz {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 22px;
  gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid #f2f6fa;
}
.pj-mphase .pj-mz:first-of-type { border-top: 0; }
.pj-mz:hover { background: #f9fcfe; }
/* Der Haken ist ein Kreis, kein Kaestchen: ein Kaestchen sieht aus
   wie ein Filter, und daneben steht in dieser Oberflaeche schon
   eines. */
.pj-mhaken {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 2px solid #cfdbe8; background: #fff; color: transparent;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.pj-mhaken .material-symbols-rounded { font-size: 15px; }
.pj-mhaken:hover { border-color: var(--accent, #1a9bdb); }
.pj-mhaken[disabled] { cursor: default; opacity: .4; }
.pj-mz.ok .pj-mhaken { background: #2f7d5b; border-color: #2f7d5b; color: #fff; }
.pj-mtitel { font-size: 13px; min-width: 0; }
.pj-mz.ok .pj-mtitel { color: #7b8a9c; }
.pj-mz.weg { opacity: .5; }
.pj-mz.weg .pj-mtitel { text-decoration: line-through; }
.pj-meigen {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(var(--accent-rgb), .13); color: var(--accent-dark, #0d6a99);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.pj-mfrist { font-size: 11px; color: #7b8a9c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-mfrist.ok { color: #2f7d5b; }
/* Rot bekommt nur der erste offene Schritt — siehe kette() in
   deal.js. Drei rote Zeilen gleichzeitig sagen nichts mehr
   darueber, was zu tun ist. */
.pj-mfrist.spaet { color: #b3261e; background: #fdecea; border-radius: 999px; padding: 2px 8px; font-weight: 700; }
.pj-mweg {
  border: 0; background: none; color: #9aa8b8; cursor: pointer; padding: 0;
  display: grid; place-items: center; opacity: 0; transition: opacity .12s, color .12s;
}
.pj-mz:hover .pj-mweg, .pj-mweg:focus-visible { opacity: 1; }
.pj-mweg:hover { color: #b3261e; }
.pj-mweg .material-symbols-rounded { font-size: 18px; }
@media (hover: none) { .pj-mweg { opacity: 1; } }

.pj-mdazu { display: flex; gap: 8px; padding: 9px 14px 13px; }
.pj-mdazu input {
  flex: 1; min-width: 0; border: 1px solid var(--scrm-linie, #e7eef6); border-radius:10px;
  padding: 7px 11px; font: inherit; font-size: 12.5px; background: #fbfdff; color: inherit;
}
.pj-mdazu input:focus {
  outline: 2px solid rgba(var(--accent-rgb), .4); outline-offset: -1px;
  border-color: var(--accent, #1a9bdb);
}
.pj-mdazu button {
  border: 1px solid var(--scrm-linie, #e7eef6); background: #fff; border-radius:10px;
  padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--accent-dark, #0d6a99); white-space: nowrap;
}
.pj-mdazu button:hover { background: rgba(var(--accent-rgb), .08); border-color: var(--accent, #1a9bdb); }

.pj-mleer { text-align: center; padding: 34px 24px; background: #fff;
  border: 1px solid var(--scrm-linie, #e7eef6); border-radius: 14px; }
.pj-mleer .material-symbols-rounded { font-size: 34px; color: #c3cedb; }
.pj-mleer b { display: block; margin: 8px 0 4px; font-size: 14px; }
.pj-mleer p { margin: 0 auto 14px; max-width: 420px; font-size: 12.5px; color: #7b8a9c; line-height: 1.5; }

/* ---------- Der Stand in der Spalte ---------- */
.pj-mbalken { display: flex; gap: 4px; margin-bottom: 11px; }
.pj-mbalken > div { flex: 1; min-width: 0; }
.pj-mbl { height: 6px; border-radius: 3px; background: #e4ecf5; overflow: hidden; }
.pj-mbl i { display: block; height: 100%; background: var(--accent, #1a9bdb); }
.pj-mbl i.voll { background: #2f7d5b; }
.pj-mbalken span {
  display: block; margin-top: 5px; font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #9aa8b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-mjetzt { border: 1px solid var(--scrm-linie, #e7eef6); border-radius:10px; padding: 11px 12px; background: #f8fbfd; }
.pj-mschild { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #9aa8b8; }
.pj-mwas { font-size: 13.5px; font-weight: 700; margin: 3px 0 5px; }
.pj-mwann { font-size: 11.5px; color: #7b8a9c; }
.pj-mwann.spaet { color: #b3261e; font-weight: 700; }
.pj-mjetzt button {
  margin-top: 10px; width: 100%; border: 0; border-radius:10px; padding: 8px;
  background: var(--accent, #1a9bdb); color: #fff; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.pj-mjetzt button:hover { background: var(--accent-dark, #0d6a99); }
.pj-mdanach { margin-top: 10px; font-size: 11.5px; color: #7b8a9c; display: flex; align-items: center; gap: 6px; }
.pj-mdanach .material-symbols-rounded { font-size: 15px; color: #9aa8b8; flex: none; }

/* Der Grund eines Fehlschlags, so wie er ankam. Schreibmaschine und
   umbrechend: da steht ein Befehlsname oder eine Serverantwort drin,
   und wer sie melden soll, muss sie ganz lesen koennen. */
.pj-mgrund {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px; color: #b3261e;
  background: #fdecea; border-radius:10px; padding: 8px 11px;
  word-break: break-word;
}

/* ---------- Die Vorlage der Maßnahmen ----------
   Dieselbe Form wie die Liste im Deal, damit man nicht zweimal
   lernen muss, wo was steht. Statt Haken und Frist: Titel zum
   Tippen, Tage, und die Reihenfolge. */
.pj-mwahl { display: flex; gap: 6px; margin-bottom: 12px; }
.pj-mwahl button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--scrm-linie, #e7eef6); background: #fff; color: #41556d;
  border-radius: 10px; padding: 7px 13px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
}
.pj-mwahl button .material-symbols-rounded { font-size: 17px; }
.pj-mwahl button.an { background: var(--accent, #1a9bdb); border-color: var(--accent, #1a9bdb); color: #fff; }

.pj-mhinweis {
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: #24506b;
}
.pj-mhinweis .material-symbols-rounded { font-size: 19px; color: var(--accent-dark, #0d6a99); flex: none; }

.pj-vz {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 26px 26px 26px;
  gap: 8px; align-items: center; padding: 6px 14px; border-top: 1px solid #f2f6fa;
}
.pj-mphase .pj-vz:first-of-type { border-top: 0; }
.pj-vtitel {
  width: 100%; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 8px; font: inherit; font-size: 13px; background: transparent; color: inherit;
}
.pj-vtitel:hover { background: #f6fafd; }
.pj-vtitel:focus { outline: 0; background: #fff; border-color: var(--accent, #1a9bdb); }
.pj-vfrist { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #7b8a9c; }
.pj-vfrist input {
  width: 46px; border: 1px solid var(--scrm-linie, #e7eef6); border-radius: 8px;
  padding: 4px 6px; font: inherit; font-size: 12px; text-align: right; color: inherit;
}
.pj-vknopf {
  border: 0; background: none; color: #9aa8b8; cursor: pointer; padding: 3px;
  display: grid; place-items: center; border-radius: 8px;
}
.pj-vknopf:hover { background: #f1f5fa; color: #1f2d3f; }
.pj-vknopf.weg:hover { color: #b3261e; }
.pj-vknopf .material-symbols-rounded { font-size: 18px; }
.pj-vknopf[disabled] { opacity: .25; cursor: default; }
.pj-vknopf[disabled]:hover { background: none; color: #9aa8b8; }

.pj-vfuss {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  font-size: 12.5px; color: #7b8a9c;
}
.pj-vfuss .pj-tun { margin-left: auto; }