/* ============================================================
   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.
   ============================================================ */
.pj-frame{
  position:absolute; inset:0; overflow:auto;
  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:14px;
  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:11px; 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:9px; 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:13px;
  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:12px; 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:14px; 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:9px 9px 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; }
.pj-kasten{ background:#fff; border-radius:13px; 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{ margin-left:auto; 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; }
.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. */
.pj-kasten.naechster, .pj-kasten.warnung{ display:flex; gap:10px; align-items:flex-start; }
.pj-kasten.naechster .material-symbols-rounded,
.pj-kasten.warnung .material-symbols-rounded{ font-size:19px; flex:none; margin-top:1px; }
.pj-kasten.naechster{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4); }
.pj-kasten.naechster .material-symbols-rounded{ color:var(--accent); }
.pj-kasten.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-kasten.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-kasten.warnung .material-symbols-rounded{ color:var(--scrm-kalt,#b3261e); }
.pj-kasten.naechster b, .pj-kasten.warnung b{ font-size:13.5px; }
.pj-kasten.naechster p, .pj-kasten.warnung p{ margin:2px 0 0; font-size:12px; color:var(--scrm-mut,#8a97a8); line-height:1.5; }

.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:12px; 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:9px; 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:16px; 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:9px;
  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:9px; 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:9px; 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:9px; 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:9px;
  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: 9px;
  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: 11px;
  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-wunschneu {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
}
.pj-wwer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #64748b;
}
.pj-wwer span { flex: none; }
.pj-wwer select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #12233a;
}
.pj-wunschleer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 11px;
  border-radius: 9px;
  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: 13px;
}
.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 ---------- */
.pj-bib {
  display: flex;
  gap: 7px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid #e7eef6;
}
.pj-bib select {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #12233a;
}
.pj-bibzu {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  background: #ef8a3c;
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.pj-bibzu:hover:not(:disabled) { background: #e07a2a; }
/* Ohne Wahl ist der Knopf aus — sonst klickt man ins Leere und
   fragt sich, warum nichts passiert. */
.pj-bibzu:disabled { background: #e2eaf3; color: #9fb0c4; cursor: default; }
.pj-bibzu .material-symbols-rounded { font-size: 16px; }

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

/* Der Knopf in einer Kachel: fuehrt zum Blatt, statt das Formular
   in die Spalte zu quetschen. */
.pj-kastenzu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  padding: 7px 11px;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: #1e599d;
  cursor: pointer;
}
.pj-kastenzu:hover { border-color: #1e599d; background: #f3f8fd; }
.pj-kastenzu .material-symbols-rounded { font-size: 16px; }

/* Im Blatt steht die Personenwahl ueber dem Aufnahmefeld. */
.crs-dlg .pj-wwer { margin: 14px 0 12px; }

/* ============================================================
   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: 20px;
}
.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; }
.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: 20px;
}
.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; }
.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 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: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. */
/* Platz fuer fuenf Kontakte, danach wird gescrollt: 5 Karten zu
   63 Pixeln und 4 Luecken zu 7 = 343. Gemessen, nicht geraten.
   Wer eine sechste Person hat, sieht sie angeschnitten — und
   genau daran erkennt man, dass es weitergeht. */
.pj-krliste { display: grid; gap: 7px; max-height: 343px; overflow-y: auto; }
.pj-krz {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 11px;
  border: 1px solid #e7eef6;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.pj-krz:hover { border-color: #1e599d; }
.pj-krav {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.pj-krm { flex: 1; min-width: 0; display: grid; gap: 3px; }
/* Zwei Zeilen, nicht eine: in einer Spalte von rund 350 Pixeln
   blieb von "Entscheider" sonst ein "Entsch…". */
.pj-kroben { display: flex; align-items: baseline; gap: 8px; }
.pj-krunten { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pj-krn {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-krw { flex: none; font-size: 13.5px; font-weight: 800; }
.pj-krw.vorschlag { color: #8a97a8; font-weight: 700; }
.pj-krh {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
}
.pj-krh .material-symbols-rounded { font-size: 13px; }
.pj-krh.gut  { background: #e7f5ee; color: #0e7c6b; }
.pj-krh.neu  { background: #eef2f7; color: #8a97a8; }
.pj-krh.kalt { background: #fdeceb; color: #b3261e; }
.pj-krr {
  font-size: 11.5px;
  color: #8a97a8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-krstill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #c2691a;
}
.pj-krstill .material-symbols-rounded { font-size: 13px; }
/* 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: 7px;
  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: 14px;
  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: 9px;
  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: 11px;
  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.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; }

/* ============================================================
   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: 11px;
  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: 12px;
  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: 9px;
  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: 9px;
  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: 9px;
  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: 11px; 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: 9px; 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; }