/* Vögi 2 — Suchseite /reisen: Filterspalte rechts, wenn Vögi im Rahmen läuft;
   allgemein: Radios und Kästchen als eigene Zeichen, Trefferzahlen je Option,
   ausgegraute Kombinationen. Tokens aus voegi-assistant.css. */

/* ─── Filterspalte rechts im Rahmen der Hülle ──────────────────────────── */
/* Vögi setzt die Filter; die Liste soll direkt neben dem Assistenten stehen,
   die Spalte bleibt optional am rechten Rand. .search ist ein Flex-Container. */
body.voegi-framed .search > .js-search-sticky {
  order: 2;
}
body.voegi-framed .search > .search__main {
  order: 1;
  margin-left: 0;
  margin-right: 20px;
}
body.voegi-framed .search > .search__main-cover {
  order: 3;
}

/* ─── Optionen: eine Zeile je Option, Zeichen links, Text daneben ───────── */
.search__filters .search__filter ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
}
.search__filters .search__filter ul > li > label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.search__filters .search__filter ul > li > input + label {
  flex: 1 1 auto;
  margin: 0;
}
.search__filters .search__filter ul > li > ul {
  flex: 1 1 100%;
  margin: 2px 0 4px 28px;
  padding: 0;
}
.search__filters .search__filter ul ul > li {
  flex-wrap: nowrap;
  padding: 0;
}
.search__filters .search__filter ul ul > li > input + label {
  flex: 1 1 0;
  min-width: 0;
}

/* Radios und Kästchen: eigene Zeichen in Vögele-Farben. */
.search__filters .search__filter input[type="radio"],
.search__filters .search__filter input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.search__filters .search__filter input[type="radio"] {
  border-radius: 50%;
}
.search__filters .search__filter input[type="checkbox"] {
  border-radius: 3px;
}
.search__filters .search__filter input[type="radio"]:hover,
.search__filters .search__filter input[type="checkbox"]:hover {
  border-color: #fff;
}
.search__filters .search__filter input[type="radio"]:checked {
  border-color: var(--voegi-contrast);
}
.search__filters .search__filter input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--voegi-contrast);
}
.search__filters .search__filter input[type="checkbox"]:checked {
  border-color: var(--voegi-contrast);
  background: var(--voegi-contrast);
}
.search__filters .search__filter input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 11px;
  border: solid var(--voegi-green-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.search__filters .search__filter input[type="radio"]:focus-visible,
.search__filters .search__filter input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--voegi-contrast);
  outline-offset: 2px;
}

/* Trefferzahl je Option; ausgegraut, wenn die Kombination leer wäre. */
.search__filters .voegi-zahl {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}
.search__filters .voegi-zahl:empty {
  display: none;
}
.search__filters .search__filter ul > li.is-leer > label,
.search__filters .search__filter ul > li.is-leer > input + label {
  opacity: 0.45;
}
.search__filters .search__filter ul > li.is-leer > input {
  opacity: 0.45;
}