/* Baustein person: Personenwahl (Bedienkonzept, Pilot Maschinen, Bauplan
   1.3). Besitzer: WP6. Die Grundvorlage bindet die Datei nach dem
   globalen Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben
   als Token mit Rueckfall; eine Regel fuer die Telefonbreite (560px).

   Makro templates/_personensuche.html (mit Zweck), Skript
   static/js/personensuche.js. Die Klassen der alten Suche
   (.personensuche, -feld, -liste, -zusatz, -gruppe, -leer) stehen in
   vorabsafe.css und bleiben dort; die Trefferliste haengt hier am
   Suchfeld (.personenwahl-suche), nicht am ganzen Kasten. */

.personenwahl { margin-bottom: 4px; }

/* Stern am Baustein (Festlegung 14): Pflicht, sonst keine Markierung. */
.personenwahl-stern { color: var(--rot, #b3261e); font-weight: 700; }

/* Wahlen: aus dem Betrieb, extern, ohne Konto. */
.personenwahl-wahlen { display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 2px 0 6px; }
.personenwahl-wahl { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 400; cursor: pointer; }
.personenwahl-wahl input { width: auto; margin: 0; }

.personenwahl-teil { margin-top: 4px; }
.personenwahl-teil[hidden] { display: none; }

/* Suchfeld mit Trefferliste darunter (Person oder Firma). */
.personenwahl-suche { position: relative; }
.personenwahl-firma-feld { width: 100%; }
.personenwahl-ich { font-weight: 700; color: var(--navy, #1F4570); }

/* Nachweis-Ampel einer Firma in der Trefferliste: Punkt und Grund. */
.personenwahl-frist { display: inline-flex; align-items: center; gap: 5px;
  margin-left: 10px; font-size: 0.85em; color: var(--muted, #5f7183); }
.personenwahl-frist::before { content: ""; width: 10px; height: 10px;
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15);
  background: #b6c0cc; flex: none; }
.personenwahl-frist-gruen::before { background: var(--gruen, #2e7d32); }
.personenwahl-frist-gelb::before { background: var(--gold, #D4A648); }
.personenwahl-frist-rot::before { background: var(--rot, #b3261e); }
.personenwahl-frist-grau::before { background: #b6c0cc; }

/* Mehrfachform: entfernbare Chips, darunter der Zaehler. */
.personenwahl-chips { display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 6px; }
.personenwahl-chips:empty { display: none; }
.personenwahl-chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 12px; border-radius: 999px;
  background: #EBF2F8; color: var(--navy, #1F4570);
  font-size: 0.9em; font-weight: 600; }
.personenwahl-chip-x { border: none; background: transparent;
  cursor: pointer; font-size: 1.1em; line-height: 1; color: inherit;
  padding: 0 4px; min-height: 28px; min-width: 28px; }
.personenwahl-chip-x:hover,
.personenwahl-chip-x:focus-visible { color: var(--rot, #b3261e); }
.personenwahl-zaehler { margin: 4px 0 0; font-size: 0.9em;
  color: var(--muted, #5f7183); }

/* Satz unter der Firma (Verzeichnis nicht verfuegbar), Hinweis, Fehler. */
.personenwahl-satz { margin: 4px 0 0; font-size: 0.9em;
  color: var(--muted, #5f7183); }
.personenwahl-satz[hidden] { display: none; }
.personenwahl-hinweis { margin: 4px 0 0; font-size: 0.9em;
  color: var(--muted, #5f7183); }
.personenwahl-fehler { margin: 4px 0 0; font-size: 0.9em; font-weight: 600;
  color: var(--rot, #b3261e); }
.personenwahl-fehlerhaft .personensuche-feld,
.personenwahl-fehlerhaft .personenwahl-teil input[type="text"] {
  border-color: var(--rot, #b3261e); }

@media (max-width: 560px) {
  .personenwahl-wahlen { flex-direction: column; gap: 6px; }
  .personenwahl-frist { display: flex; margin: 2px 0 0; }
  .personenwahl-chip { max-width: 100%; }
}