/* ============================================================
   HAUSGEMEINSCHAFT/STYLE.CSS - Seitenspezifische Styles
   (Relations-Auswahl und Chips kommen aus ortsgemeinschaft/style.css: .og-*)
   ============================================================ */

/* Schritt "Unser Weg": zart gefärbte Plakette mit Nummer (1–6) in der Farbe des Schritts */
.hg-weg {
  --weg: var(--accent-dark, var(--gold-mittel));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  background: color-mix(in srgb, var(--weg) 18%, var(--paper, #fff));
  color: var(--weg-dunkel, color-mix(in srgb, var(--weg) 70%, #000));
  white-space: nowrap;
}

.hg-weg b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--weg);
  color: var(--weg-text, #fff);
  font-size: 13px;
  font-weight: 800;
}

body.dark-mode .hg-weg {
  background: color-mix(in srgb, var(--weg) 24%, var(--paper, var(--nacht-700)));
  color: color-mix(in srgb, var(--weg) 55%, #fff);
}


/* Haus-Symbol im Viereck – gleiche Form und Farbe wie das Kürzel der Ortsgemeinschaft */
.og-kuerzel.hg-haus { width: 40px; padding: 0; margin-right: 0; }
.og-kuerzel.hg-haus .material-icons { font-size: 20px; }

/* Teilnehmer / Geistliche Eltern in der Tabelle: schlichte Namensliste */
.hg-name { line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.hg-name-mehr { font-size: 13px; color: var(--ink-soft); }

/* Auswahl „Unser Weg“ im Dialog: Auswahlfeld wie ein Select, Einträge als farbige Plaketten */
.hg-select { position: relative; }
.hg-select-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 6px 12px 6px 10px;
  font: inherit; font-weight: 400; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 8px;
}
.hg-select-knopf:focus-visible, .hg-select-knopf[aria-expanded="true"] {
  outline: none; border-color: var(--login-background); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pal-gold) 10%, transparent);
}
.hg-select-pfeil { color: var(--ink-soft); font-size: 20px; transition: transform .15s ease; }
.hg-select-knopf[aria-expanded="true"] .hg-select-pfeil { transform: rotate(180deg); }
.hg-select-leer { color: var(--ink-soft); font-size: 16px; padding-left: 4px; }
.hg-select-liste {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column; padding: 6px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--nacht-950) 14%, transparent);
}
.hg-select-liste[hidden] { display: none; }
.hg-select-option {
  display: flex; align-items: center; width: 100%; padding: 6px 8px;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
}
.hg-select-option:hover, .hg-select-option:focus-visible { background: var(--surface); outline: none; }
.hg-select-option.is-aktiv { background: var(--accent-tint); }
.hg-select-option .hg-weg, .hg-select-knopf .hg-weg { cursor: pointer; }

/* Aufklapp-Liste der Teilnehmer: Ort grau, nicht fett */
.detail-list-value.hg-pop-ort { font-weight: 400; color: var(--ink-soft); }