/* Baustein personenkreis: Personenkreis mit "betrifft n Personen"
   (Bedienkonzept E19). Ausrollen bis zur Begehung, Bauplan 3A. Besitzer:
   A1c. Leer angelegt von A0a. 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/_bausteine/personenkreis.html, Skript
   static/js/bausteine/personenkreis.js. Bereich und Arbeitsplatz zeichnet
   die Kaskade des Ort-Bausteins (ort.css); hier steht nur, was der Kreis
   selbst mitbringt: die Wahl der Art, die Teile je Art und die Zahl. */

/* Der ganze Kreis ist eine Gruppe (fieldset) ohne eigenen Rahmen. */
.personenkreis { border: none; margin: 0 0 4px; padding: 0; min-width: 0; }
.personenkreis-titel { padding: 0; margin: 0 0 6px; font-weight: 600;
  font-size: 0.9rem; }

/* Zuerst die Art: nebeneinander, am Telefon untereinander. */
.personenkreis-arten { display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin: 0 0 6px; }
.personenkreis-art { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 400; cursor: pointer; min-height: 32px; }
.personenkreis-art input { width: auto; margin: 0; }

/* Dann die Einheit der gewaehlten Art; das Skript blendet die anderen
   Teile aus (ohne Skript stehen alle da). */
.personenkreis-teil { margin-top: 4px; }
.personenkreis-teil[hidden] { display: none; }
.personenkreis-teil > label { display: block; margin: 8px 0 6px;
  font-weight: 600; font-size: 0.9rem; }

/* Darunter sofort die Zahl -- nur die Zahl, keine Namen. */
.personenkreis-zahl { margin: 8px 0 0; font-weight: 600;
  color: var(--navy, #1F4570); min-height: 1.4em; }
.personenkreis-zahl:empty { min-height: 0; margin: 0; }

/* Fehler am Kreis: rot darunter, roter Rand an den Auswahlen. */
.personenkreis-fehler { margin: 6px 0 0; font-size: 0.85rem;
  font-weight: 600; color: var(--rot, #b3261e); }
.personenkreis-fehlerhaft select { border-color: var(--rot, #b3261e); }

@media (max-width: 560px) {
  .personenkreis-arten { flex-direction: column; gap: 6px; }
}