/* ─────────────────────────────────────────────────────────────
   GD Filterleiste – Stylesheet
   Layout bewusst identisch zum "Apple Bottom Nav"-Widget.
   ───────────────────────────────────────────────────────────── */

.gqa-filter-bar-wrapper,
.gqa-filter-bar-wrapper .gqa-filter-form {
  margin: 0;
  padding: 0;
}

.gqa-filter-bar *,
.gqa-filter-bar *::before,
.gqa-filter-bar *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Leiste ─────────────────────────────────────────────────── */
.gqa-filter-bar {
  width: 100%;
  /* Rahmen und Innenabstand müssen in die 100% hineinrechnen – sonst ragt die
     Leiste bei voller Breite über den Viewport hinaus (waagerechter Scroll). */
  box-sizing: border-box;
  background-color: rgba(28, 28, 30, 0.85);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px 20px 0 0;
  --gqa-padding-v: 6px;
  --gqa-accent: #fc3c44;
  padding-top: var(--gqa-padding-v, 6px);
  padding-bottom: calc(var(--gqa-padding-v, 6px) + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gqa-filter-bar[data-position="fixed"] {
  position: fixed;
  bottom: var(--gqa-bottom-offset, 0px);
  left: 0;
  right: 0;
}

.gqa-filter-bar[data-position="sticky"] {
  position: sticky;
  bottom: var(--gqa-bottom-offset, 0px);
  left: 0;
  right: 0;
}

.gqa-filter-bar[data-position="relative"] {
  position: relative;
}

.gqa-filter-bar.has-blur {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

@media (orientation: landscape) {
  .gqa-filter-bar.gqa-filter-bar {
    padding-bottom: var(--gqa-padding-v, 6px);
  }
}

/* ── Chip-Liste ─────────────────────────────────────────────── */
.gqa-filter-list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  list-style: none;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  gap: 0;
}

.gqa-filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  list-style: none;
}

.gqa-filter-item .gqa-filter-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 12px;
  width: 100%;
  border: none;
  background-color: transparent;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background-color 0.22s ease;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.gqa-filter-item.is-active .gqa-filter-link,
.gqa-filter-item.is-open .gqa-filter-link {
  background-color: rgba(252, 60, 68, 0.12);
}

/* ── Symbol ─────────────────────────────────────────────────── */
.gqa-filter-item .gqa-filter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(235, 235, 245, 0.4);
  transition: color 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1;
  will-change: transform;
  overflow: hidden;
}

.gqa-filter-item .gqa-filter-icon i {
  font-size: 24px;
  display: block;
  line-height: 1;
  height: 1em;
}

.gqa-filter-item .gqa-filter-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ── Beschriftung ───────────────────────────────────────────── */
.gqa-filter-item .gqa-filter-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(235, 235, 245, 0.4);
  transition: color 0.22s ease;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
  text-align: center;
  line-height: 1.15;
}

.gqa-filter-item.is-active .gqa-filter-icon,
.gqa-filter-item.is-open .gqa-filter-icon {
  color: var(--gqa-accent, #fc3c44);
  transform: scale(1.08);
}

.gqa-filter-item.is-active .gqa-filter-icon svg,
.gqa-filter-item.is-open .gqa-filter-icon svg {
  fill: var(--gqa-accent, #fc3c44);
}

.gqa-filter-item.is-active .gqa-filter-label,
.gqa-filter-item.is-open .gqa-filter-label {
  color: var(--gqa-accent, #fc3c44);
}

/* ── Tap-Animation ──────────────────────────────────────────── */
.gqa-filter-bar.has-animation .gqa-filter-item .gqa-filter-icon {
  transition: color 0.22s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.15s ease;
}

.gqa-filter-bar.has-animation .gqa-filter-item.is-tapped .gqa-filter-icon {
  transform: scale(0.78);
  opacity: 0.6;
}

@keyframes gqaIconBounceIn {
  0%   { transform: scale(0.72); }
  55%  { transform: scale(1.18); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}

.gqa-filter-bar.has-animation .gqa-filter-item.just-activated .gqa-filter-icon {
  animation: gqaIconBounceIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes gqaRipple {
  to { transform: scale(3.5); opacity: 0; }
}

.gqa-filter-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  transform: scale(0);
  animation: gqaRipple 0.45s ease-out forwards;
}

/* ── Inhaltsbreite ──────────────────────────────────────────── */
.gqa-filter-bar.is-fit-content {
  width: fit-content;
  width: -moz-fit-content;
  min-width: unset;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 20px;
}

.gqa-filter-bar.is-fit-content[data-position="fixed"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: calc(var(--gqa-bottom-offset, 0px) + 12px);
}

.gqa-filter-bar.is-fit-content[data-position="sticky"] {
  left: 50%;
  transform: translateX(-50%);
}

.gqa-filter-bar.is-fit-content .gqa-filter-list {
  width: auto;
  max-width: none;
  justify-content: flex-start;
}

.gqa-filter-bar.is-fit-content .gqa-filter-item {
  flex: 0 0 auto;
}

/* ── Auswahl-Sheet ──────────────────────────────────────────── */
/* Breite: Das Sheet hängt bewusst NICHT mehr an der Leistenbreite (früher
   left/right: 0). In der Betriebsart "Inhaltsbreite" ändert die Leiste ihre
   Breite, sobald sich eine Chip-Beschriftung ändert (ausgewählter Wert,
   "(2)"-Zähler) — das Sheet sprang dadurch beim Auswählen in der Breite.
   Jetzt: mittig über der Leiste, Breite aus dem Inhalt (max-content),
   mindestens Leistenbreite, gedeckelt durch --gqa-sheet-max-width. Den
   endgültigen Wert friert das JavaScript beim ersten Öffnen in Pixeln ein
   (breitester Filter der Leiste), damit die Breite danach konstant bleibt. */
.gqa-filter-sheet {
  position: absolute;
  bottom: 100%;
  left: 50%;
  right: auto;
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  max-width: min( var(--gqa-sheet-max-width, 560px), calc(100vw - 24px) );
  background: rgba(28, 28, 30, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px 20px 0 0;
  color: #fff;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
  z-index: 2;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

.gqa-filter-sheet.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Bei einer Leiste in Inhaltsbreite ist das Sheet in der Regel breiter als die
   Leiste und schwebt darüber – dann wirkt eine rundum geschlossene Karte mit
   kleinem Abstand stimmiger als die oben aufgesetzte Variante. */
.gqa-filter-bar.is-fit-content .gqa-filter-sheet {
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  margin-bottom: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.gqa-filter-sheet-inner {
  padding: 10px 16px 14px;
}

.gqa-filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
}

.gqa-filter-sheet-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.gqa-filter-sheet-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(235, 235, 245, 0.5);
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s ease;
}

.gqa-filter-sheet-close:hover {
  color: #fff;
}

.gqa-filter-sheet-body {
  --gqa-option-gap: 2px;
  max-height: 55vh;
  overflow-y: auto;
  /* Platz für die Bildlaufleiste immer reservieren. Sonst schrumpft die
     Textspalte in dem Moment, in dem die Liste scrollbar wird, und die
     Einträge rutschen. */
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 2px;
  display: flex;
  flex-direction: column;
  gap: var(--gqa-option-gap, 2px);
}

.gqa-filter-option {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: none !important;
  background-color: transparent;
  color: inherit;
  text-align: left;
  font-size: 15px;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.3;
  padding: 10px 12px;
  margin: 0 !important;
  border-radius: 12px;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gqa-filter-option:hover {
  background-color: rgba(118, 118, 128, 0.24);
}

.gqa-filter-option.is-selected {
  color: var(--gqa-accent, #fc3c44);
  font-weight: 600;
}

/* Der Eintragstext darf umbrechen, sobald die Deckelung der Sheet-Breite
   greift — abgeschnittene Einträge wären schlechter lesbar als zweizeilige. */
.gqa-filter-option .gqa-filter-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gqa-filter-option .gqa-filter-option-check {
  opacity: 0;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.gqa-filter-option.is-selected .gqa-filter-option-check {
  opacity: 1;
}

/* ── Haupt- und Unterkategorie auseinanderhalten ─────────────
   Vorher gab es nur eine feste Einrückung um 30 px, und die half wenig: Die
   Liste kam flach und alphabetisch, ein eingerückter Eintrag stand also
   irgendwo zwischen fremden Hauptkategorien und die Einrückung zeigte auf
   nichts. Seit 1.20.1 folgt jedes Kind auf sein Elternteil, und die Stufe
   steht als --gqa-option-depth am Element — deshalb hier eine Einrückung,
   die mit der Tiefe wächst statt einer festen Zahl.

   Dazu zwei Unterschiede, die auch ohne Einrückung tragen: die Hauptkategorie
   trägt mehr Gewicht, das Kind eine schmale Führungslinie und etwas weniger
   Kontrast. Die Auswahlfarbe (.is-selected) liegt darüber und bleibt in
   beiden Fällen erkennbar — deshalb steht hier nur die Schriftstärke, nicht
   die Farbe. */
.gqa-filter-option.is-parent {
  font-weight: 600;
}

.gqa-filter-option.is-child {
  --gqa-option-depth: 1;
  position: relative;
  font-weight: 400;
  color: rgba(235, 235, 245, 0.72);
  padding-left: calc(12px + var(--gqa-option-depth, 1) * 18px);
}

/* Die Linie sitzt auf der Höhe der Einrückung der eigenen Stufe, damit
   Geschwister untereinander eine durchgehende Kante ergeben. */
.gqa-filter-option.is-child::before {
  content: '';
  position: absolute;
  left: calc(var(--gqa-option-depth, 1) * 18px);
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 1px;
  pointer-events: none;
}

.gqa-filter-option.is-child.is-selected {
  color: var(--gqa-accent, #fc3c44);
}

.gqa-filter-option.is-child.is-selected::before {
  background: var(--gqa-accent, #fc3c44);
  opacity: 0.55;
}

.gqa-filter-sheet-empty {
  padding: 14px 12px;
  font-size: 14px;
  color: rgba(235, 235, 245, 0.5);
}

.gqa-filter-sheet-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
}

.gqa-filter-sheet.is-multiple .gqa-filter-sheet-foot {
  display: flex;
}

.gqa-filter-sheet-clear,
.gqa-filter-sheet-apply {
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gqa-filter-sheet-clear {
  background: rgba(118, 118, 128, 0.24);
  color: rgba(235, 235, 245, 0.85);
}

.gqa-filter-sheet-apply {
  background: var(--gqa-accent, #fc3c44);
  color: #fff;
  flex: 1;
  text-align: center;
}

.gqa-filter-sheet-clear:active,
.gqa-filter-sheet-apply:active {
  transform: scale(0.97);
}

/* ── Ladezustand ────────────────────────────────────────────── */
.gqa-filter-bar.is-loading .gqa-filter-list {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Reihe: Zurück-Schaltfläche + Leiste ────────────────────── */
/* Wird nur gerendert, wenn die Zurück-Schaltfläche aktiv ist. Dann übernimmt
   die Reihe die Positionierung, damit der Button mit definiertem Abstand
   direkt neben der Leiste sitzt (statt am Bildschirmrand zu kleben). */
.gqa-filter-row {
  --gqa-back-gap: 12px;
  --gqa-row-pad: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gqa-back-gap, 12px);
  box-sizing: border-box;
}

.gqa-filter-row[data-position="fixed"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--gqa-bottom-offset, 0px);
  padding: 0 var(--gqa-row-pad, 12px);
  z-index: 9998;
}

.gqa-filter-row[data-position="sticky"] {
  position: sticky;
  bottom: var(--gqa-bottom-offset, 0px);
  padding: 0 var(--gqa-row-pad, 12px);
  z-index: 9998;
}

.gqa-filter-row[data-position="relative"] {
  position: relative;
}

/* In der Reihe positionieren sich Leiste und Button nicht mehr selbst. */
.gqa-filter-row .gqa-filter-bar[data-position] {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
}

.gqa-filter-row .gqa-filter-side-btn[data-position] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* ── Wrapper: runde Schaltfläche + Beschriftung darunter ────── */
.gqa-filter-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.gqa-filter-row .gqa-filter-side[data-position] {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 0 var(--gqa-side-y, 0px) 0;
}

/* Beschriftung steht INNERHALB der Schaltfläche. Die Basisregel setzt
   font-size: 0 (verhindert Größenvererbung im reinen Symbol-Modus), deshalb
   bekommt die Beschriftung hier ihre eigene Schriftgröße. */
.gqa-filter-side-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  /* Farbe folgt dem Symbol – wie bei den Chips in der Leiste. */
  color: inherit;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
  text-align: center;
  pointer-events: none;
}

/* ── Mit Beschriftung: aus dem Kreis wird eine Pille ────────── */
/* Aufbau wie die Chips der Leiste: Symbol oben, Beschriftung darunter. */
.gqa-filter-side-btn.has-label {
  flex-direction: column !important;
  gap: 2px;
  width: auto !important;
  min-width: var(--gqa-back-size) !important;
  max-width: none !important;
  padding: 0 14px !important;
  /* Radius folgt der Höhe – ein prozentualer Radius ergäbe hier eine Ellipse. */
  border-radius: calc(var(--gqa-back-size, 52px) / 2) !important;
}

.gqa-filter-row .gqa-filter-bar:not(.is-fit-content) {
  flex: 1 1 auto;
}

/* ── Zurück-Schaltfläche (separates rundes Element) ─────────── */
/* !important durchgängig: Elementor-Kits und Theme-Resets stylen pauschal
   jedes <button> (u. a. border-radius und Hintergrundfarbe) und würden das
   runde Erscheinungsbild sonst überschreiben. */
.gqa-filter-side-btn {
  --gqa-back-size: 52px;
  --gqa-back-icon-size: 22px;
  --gqa-back-y: 0px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--gqa-back-size) !important;
  height: var(--gqa-back-size) !important;
  min-width: var(--gqa-back-size) !important;
  max-width: var(--gqa-back-size) !important;
  min-height: var(--gqa-back-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(44, 44, 46, 0.92);
  border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(235, 235, 245, 0.9);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
}

.gqa-filter-side-btn:hover,
.gqa-filter-side-btn:focus {
  border-radius: 50% !important;
}

.gqa-filter-side-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gqa-back-icon-size);
  height: var(--gqa-back-icon-size);
  font-size: var(--gqa-back-icon-size);
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
}

.gqa-filter-side-btn-icon i {
  font-size: var(--gqa-back-icon-size);
  line-height: 1;
  display: block;
}

.gqa-filter-side-btn-icon svg {
  width: var(--gqa-back-icon-size);
  height: var(--gqa-back-icon-size);
  fill: currentColor;
  display: block;
}

.gqa-filter-side-btn:active {
  transform: scale(0.92);
}

.gqa-filter-side-btn[data-position="fixed"] {
  position: fixed;
  bottom: calc(var(--gqa-bottom-offset, 0px) + var(--gqa-back-y, 12px) + env(safe-area-inset-bottom, 0px));
}

.gqa-filter-side-btn[data-position="sticky"] {
  position: sticky;
  bottom: calc(var(--gqa-bottom-offset, 0px) + var(--gqa-back-y, 12px));
}

.gqa-filter-side-btn[data-position="relative"] {
  position: relative;
  margin: 8px auto;
}

.gqa-filter-side-btn[data-position="fixed"][data-side="left"],
.gqa-filter-side-btn[data-position="sticky"][data-side="left"] {
  left: var(--gqa-back-x, 16px);
  right: auto;
}

.gqa-filter-side-btn[data-position="fixed"][data-side="right"],
.gqa-filter-side-btn[data-position="sticky"][data-side="right"] {
  right: var(--gqa-back-x, 16px);
  left: auto;
  margin-left: auto;
}

.gqa-filter-side-btn[data-position="fixed"]:active,
.gqa-filter-side-btn[data-position="sticky"]:active {
  transform: scale(0.92);
}

/* ── Elementor-Editor: fixed/sticky aufheben ────────────────── */
.elementor-editor-active .gqa-filter-row[data-position="fixed"],
.elementor-editor-active .gqa-filter-row[data-position="sticky"],
.elementor-editor-active .gqa-filter-bar[data-position="fixed"],
.elementor-editor-active .gqa-filter-bar[data-position="sticky"],
.elementor-editor-active .gqa-filter-back[data-position="fixed"],
.elementor-editor-active .gqa-filter-side-btn[data-position="sticky"] {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.elementor-editor-active .gqa-filter-side-btn {
  margin: 0 auto 8px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .gqa-filter-item .gqa-filter-label { font-size: 9px; max-width: 68px; }
  .gqa-filter-item .gqa-filter-icon i { font-size: 21px; }
}