/* ============================================================
   ARCHIV-FILTERLEISTE  (.ctls-evf)
   ------------------------------------------------------------
   Gemeinsam fuer Events, News, Shop und Training.

   Eine Zeile, auf jedem Bildschirm dieselbe:

     [ Suchen … ]  [ Art v ]  [ Format v ]      7 Termine

   Je Achse ein Chip mit Klappliste. Was gewaehlt ist, steht im
   Chip selbst ("Art: Konferenz"), die Anzahlen stehen in der
   Liste.

   Vorgaenger war eine Zeile je Achse mit allen Schaltern offen.
   Auf dem Telefon war die Leiste damit 514 px hoch - 63 % des
   Bildschirms, bevor der erste Treffer zu sehen war - und
   brauchte deshalb eine zweite Darstellung zum Zuklappen. Chips
   kommen mit einer Darstellung aus.

   Der Klassenname stammt vom Eventarchiv, wo die Leiste zuerst
   entstand (evf = event filter). Bewusst nicht umbenannt: das
   haette jede Regel und jede Zeile JS angefasst, ohne dass sich
   etwas aendert.
   ============================================================ */

.ctls-evf {
  margin-bottom: 2rem;
}

/* Eigene display-Regeln schlagen sonst das hidden-Attribut - das
   Zaehlerplaettchen stand dadurch als "0" da, statt zu
   verschwinden. */
.ctls-evf [hidden] { display: none !important; }

.ctls-evf-leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Suchfeld -------------------------------------------- */
.ctls-evf-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45em 0.95em;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  background: #fff;
  flex: 1 1 14rem;
  max-width: 20rem;
}

.ctls-evf-search svg {
  width: 0.9rem;
  height: 0.9rem;
  color: #9aa3ac;
  flex-shrink: 0;
}

.ctls-evf-search input {
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #222;
  width: 100%;
  padding: 0;
}

.ctls-evf-search input::-webkit-search-cancel-button { display: none; }

.ctls-evf-clear {
  border: 0;
  background: none;
  color: #9aa3ac;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ctls-evf-clear:hover { color: var(--color-primary); }

/* --- Chip ------------------------------------------------- */
.ctls-evf-achse {
  position: relative;
}

.ctls-evf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5em 1em;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.ctls-evf-chip svg {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.ctls-evf-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ctls-evf-chip[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Gesetzt = gefuellt. Zugeklappt ist der Chip der einzige
   Hinweis darauf, dass gefiltert wird - jemand kommt ueber
   /training/?einsatz=architektur von einer Bereichsseite und
   sieht sonst nur, dass es weniger Kurse sind. */
.ctls-evf-achse.is-active .ctls-evf-chip {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* --- Klappliste ------------------------------------------- */
.ctls-evf-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 13rem;
  max-width: 20rem;
  padding: 0.4rem;
  border: 1px solid #e2e6ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 12, 13, 0.1);
}

.ctls-evf-liste-suche {
  display: block;
  padding: 0.2rem 0.35rem 0.45rem;
}

.ctls-evf-liste-suche input {
  width: 100%;
  padding: 0.4em 0.7em;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #222;
  outline: 0;
}

.ctls-evf-liste-suche input:focus { border-color: var(--color-primary); }
.ctls-evf-liste-suche input::-webkit-search-cancel-button { display: none; }

/* Bei vielen Werten (Software: 20) scrollt die Liste, statt die
   Seite zu sprengen. */
.ctls-evf-liste-inhalt {
  display: flex;
  flex-direction: column;
  max-height: 17rem;
  overflow-y: auto;
}

.ctls-evf-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.5em 0.7em;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  text-align: left;
  cursor: pointer;
}

.ctls-evf-opt:hover { background: #f2f5f7; }

.ctls-evf-opt.is-active {
  background: var(--color-primary);
  color: #fff;
}

.ctls-evf-opt-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctls-evf-n {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9aa3ac;
  flex-shrink: 0;
}

.ctls-evf-opt.is-active .ctls-evf-n { color: #fff; opacity: 0.75; }

.ctls-evf-liste-leer {
  margin: 0;
  padding: 0.5em 0.7em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #9aa3ac;
}

/* --- Trefferzahl + Zuruecksetzen -------------------------- */
.ctls-evf-status {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #777;
}

.ctls-evf-reset {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #9aa3ac;
  text-decoration: underline;
  cursor: pointer;
}

.ctls-evf-reset:hover { color: var(--color-primary); }

/* Ausgefilterte Kacheln.
   ------------------------------------------------------------
   !important ist hier kein Faulheitszeichen: training-archive.css
   setzt `.tile-grid > .kurs-tile { display: flex }` - dieselbe
   Spezifitaet wie eine Regel `.tile-grid--post > [hidden]`, aber
   spaeter geladen. Das hidden-Attribut stand damit zwar an der
   Kachel, sichtbar blieb sie trotzdem: der Filter hat gezaehlt,
   aber nichts ausgeblendet.

   Eine hoehere Spezifitaet wuerde es auch tun, waere aber vom
   naechsten `display`-Eintrag in einer spaeter geladenen Datei
   genauso wieder ausgehebelt. */
.tile-grid > [hidden] { display: none !important; }

@media (max-width: 700px) {

  /* Suchfeld auf eine eigene Zeile, Chips darunter nebeneinander.
     Sonst wird das Suchfeld auf Telefonbreite so schmal, dass vom
     Platzhalter nichts mehr uebrig bleibt. */
  .ctls-evf-search {
    flex: 1 1 100%;
    max-width: none;
    order: -1;
  }

  .ctls-evf-status {
    margin-left: 0;
    width: 100%;
  }

  /* Liste am Bildschirmrand nicht abschneiden */
  .ctls-evf-achse:last-of-type .ctls-evf-liste { left: auto; right: 0; }
}

/* ============================================================
   ANSICHTSSCHALTER (Raster / Liste)
   ------------------------------------------------------------
   Zwei kleine Schalter am rechten Ende der Leiste, vor der
   Trefferzahl. Auf schmalen Bildschirmen ausgeblendet: dort
   laufen beide Ansichten einspaltig, die Wahl waere ohne Wirkung.
   ============================================================ */
.ctls-evf-ansicht {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid rgba(13, 14, 15, .16);
  border-radius: 999px;
  overflow: hidden;
}

.ctls-evf-ansicht button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ctls-evf-ansicht button + button {
  border-left: 1px solid rgba(13, 14, 15, .12);
}

.ctls-evf-ansicht button:hover {
  color: #0d0e0f;
  background: rgba(13, 14, 15, .04);
}

.ctls-evf-ansicht button.is-active {
  color: #fff;
  background: #0d0e0f;
}

/* Umschalter und Trefferzahl gehoeren zusammen.
   ------------------------------------------------------------
   .ctls-evf-status traegt ein eigenes margin-left:auto. Bricht die
   Leiste um – auf Tabletbreite regelmaessig –, schiebt das die Zahl
   ans rechte Ende und laesst den Umschalter allein am linken Anfang
   der neuen Zeile stehen. Nimmt man der Zahl ihr auto, wenn der
   Umschalter direkt davor steht, wandern beide gemeinsam nach
   rechts und bleiben als Paar erkennbar.

   Nur oberhalb der Umbruchgrenze: darunter ist der Umschalter
   ausgeblendet, dann braucht die Zahl ihr auto wieder fuer sich. */
@media (min-width: 761px) {
  .ctls-evf-ansicht + .ctls-evf-status {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .ctls-evf-ansicht { display: none; }
}