/* PLENUM — ebenen.css (Track FOEDERATIV, Bauplan Nacht 01./02.09.2026, Abschnitt 1.7)
   Ebenen-Chips ueber der Vorgangsliste. Tokens aus tokens.css, keine eigenen Farbwerte.
   Muster wie .segment-schalter in style.css (aria-pressed traegt den gewaehlten Zustand),
   aber als umbrechende Reihe statt fester Segmente, weil neuer-verband.mjs jederzeit eine
   weitere Ebene anhaengen kann.

   Umbruch statt waagerechtem Scrollen (Sichtungsbefund 02.09.2026, 390 px): die vier Chips
   Alle/Bayern/Bund/Europa brauchen zusammen rund 385 px und passen am Handy nicht in eine
   Zeile. In einer Scroll-Reihe stand der vierte als abgeschnittenes "Europ" da, und dass
   dahinter noch etwas liegt, sieht man nicht. Umbrechend sind alle Ebenen immer sichtbar,
   auch wenn ein weiterer Landesverband dazukommt. */
.ebenen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 10px;
  margin: 0 0 4px;
}
.ebenen-filter__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--linie-tragend);
  border-radius: var(--r-chip, 3px);
  background: transparent;
  color: var(--tinte-2);
  font-size: calc(14px * var(--textgroesse-skala));
  cursor: pointer;
}
.ebenen-filter__chip[aria-pressed="true"] {
  background: var(--hoch);
  color: var(--tinte);
  border-color: var(--volt-violett-text);
  font-weight: 500;
}
.ebenen-filter__chip:focus-visible {
  outline: 2px solid var(--volt-violett-text);
  outline-offset: 2px;
}
.ebenen-filter__flagge { flex: 0 0 auto; border-radius: 2px; }
.ebenen-filter__name { white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .ebenen-filter__chip { transition: background .15s ease, color .15s ease, border-color .15s ease; }
}