/* teamlagen (docs/16) — eigene Datei, damit die Bausteine sich nicht in app.css ins Gehege kommen. */

/* Der Umschalter „Team-Lagen“ oben rechts in der Leitstelle: ein kleiner Knopf wie die
   übrigen (.btn.tiny), mit einer Schiene davor, die zeigt, ob er an ist. Grün heißt:
   das Team darf dir Großschadenslagen schicken. */
.team-lagen {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted);
}
.team-lagen:hover:not(:disabled) { color: var(--text); }
.team-lagen.an { color: var(--text); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }

.team-lagen-schiene {
  position: relative; flex-shrink: 0;
  width: 24px; height: 13px; border-radius: 7px;
  background: var(--line-2, var(--line));
  transition: background .15s ease;
}
.team-lagen-knopf {
  position: absolute; top: 2px; left: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.team-lagen.an .team-lagen-schiene { background: color-mix(in srgb, var(--ok) 30%, transparent); }
.team-lagen.an .team-lagen-knopf { transform: translateX(11px); background: var(--ok); }

.team-lagen:focus-visible { outline: 2px solid var(--blau, var(--blue)); outline-offset: 1px; }
/* Bei 1280 px war die Kopfzeile 22 px zu breit: Ton und Verbindung fielen heraus. Unter
   1400 px bleibt nur der Schalter; der Name steht im Tooltip und für Vorleser im Label. */
@media (max-width: 1400px) { .team-lagen-text { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .team-lagen-schiene, .team-lagen-knopf { transition: none; }
}