/* Team app ▸ shared multiple choice of people (26.10.2026, team/teamPersonenWahl.js). Same look as the person picker of
   „Aufgabe weitergeben“ (team-dashboard.css .td-dd-*): trigger like a field, inline panel with the search field and its
   magnifier, a hairline, rows with round picture and name. Several are ticked (marked row + check), the chosen ones stand
   as pills under the trigger. The list is a grid: 2–3 columns when there is room, one on phones (no horizontal scroll at
   390 px). Unscoped pw- classes so every Team card or dialog can use it; tokens only (design-tokens.css,
   web3-design.css), no colour values of its own. */
.pw {
  --pw-akzent: var(--w3-akzent, var(--text-1));
  --pw-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3));
  --pw-akzent-rand: var(--w3-akzent-rand, var(--border-3));
  --pw-fuellung: var(--w3-fuellung, var(--surface-2));
  --pw-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3));
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; max-width: 100%;
}
.pw-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); box-sizing: border-box; width: 100%; min-height: 38px;
  padding: 0 var(--space-3); border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--pw-fuellung));
  color: var(--text-1); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer;
}
.pw-knopf:hover:not(:disabled) { border-color: var(--border-3); }
.pw-knopf:focus-visible { outline: none; border-color: var(--pw-akzent-rand); box-shadow: var(--input-focus-ring, var(--focus-ring)); }
.pw-knopf:disabled { cursor: default; opacity: .6; }
.pw-wert { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pw-wert-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-platzhalter { color: var(--input-placeholder, var(--text-3)); }
.pw-sym { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw-pfeil { color: var(--text-3); transition: transform var(--t-fast, .12s); }
.pw-knopf[aria-expanded="true"] > .pw-pfeil { transform: rotate(180deg); }

.pw-panel {
  display: flex; flex-direction: column; min-width: 0; padding: var(--space-2) 0; border-radius: var(--radius-lg);
  background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-2);
}
.pw-panel[hidden] { display: none; }
.pw-suchfeld { position: relative; padding: 0 var(--space-2); }
.pw-lupe { position: absolute; left: calc(var(--space-2) + 10px); top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.pw-suche {
  box-sizing: border-box; width: 100%; min-height: 34px; padding: var(--space-1) var(--space-3) var(--space-1) 32px;
  border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--pw-fuellung));
  color: var(--text-1); font: inherit; font-size: var(--fs-13);
}
.pw-suche::placeholder { color: var(--input-placeholder, var(--text-3)); }
.pw-suche:focus { outline: none; border-color: var(--pw-akzent-rand); box-shadow: var(--input-focus-ring, var(--focus-ring)); }
.pw-trenner { height: 1px; margin: var(--space-2) var(--space-2) var(--space-1); background: var(--border-1); }
.pw-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 2px var(--space-1); align-content: start;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-1);
}
.pw-liste[hidden] { display: none; }
.pw-option {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-1); font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer;
}
.pw-option:hover, .pw-option.pw-aktiv { background: var(--pw-fuellung-stark); }
.pw-option.pw-aktiv { box-shadow: inset 0 0 0 1px var(--border-3); }
.pw-option[aria-selected="true"] { background: var(--pw-akzent-flaeche); color: var(--pw-akzent); }
.pw-option[aria-selected="true"].pw-aktiv { box-shadow: inset 0 0 0 1px var(--pw-akzent-rand); }
.pw-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-meta { color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-haken { width: 14px; height: 14px; color: var(--pw-akzent); visibility: hidden; }
.pw-option[aria-selected="true"] > .pw-haken { visibility: visible; }
.pw-treffer { background: none; color: var(--pw-akzent); font-weight: var(--fw-bold); }
.pw-leer { padding: var(--space-4) var(--space-3); color: var(--text-3); font-size: var(--fs-13); text-align: center; }
.pw-leer[hidden] { display: none; }
.pw-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3) 0; }
.pw-zahl { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.pw-zahl-hinweis { color: var(--warning, var(--text-2)); }
.pw-fertig {
  min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--pw-fuellung-stark);
  color: var(--text-1); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer;
}
.pw-fertig:focus-visible, .pw-weg:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pw-avatar {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px;
  border-radius: var(--radius-pill); background: var(--pw-akzent-flaeche); color: var(--pw-akzent); font-size: 10px; font-weight: var(--fw-semibold);
}
.pw-avatar-klein { width: 18px; height: 18px; font-size: 9px; }
.pw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pw-chips[hidden] { display: none; }
.pw-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; min-height: 26px; padding: 0 2px 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--pw-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--pw-akzent-rand); color: var(--text-1); font-size: var(--fs-12);
}
.pw-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-weg {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-14); line-height: 1; cursor: pointer;
}
.pw-weg:hover:not(:disabled) { color: var(--text-1); background: var(--pw-fuellung-stark); }
@media (prefers-reduced-motion: reduce) {
  .pw-pfeil { transition: none; }
}