/* ============================================================
   PAGINATION  –  Flexbox, 3-Slot-Layout
   Nutzt ausschließlich Variablen aus variables.css
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.pag-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0;
  width: 100%;
}

/* ── Slots ───────────────────────────────────────────────── */
.pag-slot {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0; /* verhindert overflow-Probleme */
}

.pag-slot--left  { justify-content: flex-start; }
.pag-slot--center{ justify-content: center; gap: 0.5rem; }
.pag-slot--right { justify-content: flex-end; }

/* ── Prev / Next Buttons ─────────────────────────────────── */
.pag-nav__btn {
  min-width: var(--sd-btn-height);
  min-height: var(--sd-btn-height);
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: var(--sd-radius-base);
  border: 1px solid var(--sd-border-light);
  color: var(--sd-text);
  box-shadow: none;
}

.pag-nav__btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: var(--sd-radius-base);
  border: 1px solid #000;
  color: var(--sd-text);
  box-shadow: none;
}

/* ── Seitenanzeige "Seite X von Y" ──────────────────────── */
.pag-page-info {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: var(--sd-btn-font-weight);
  font-size: 0.9rem;
  color: var(--sd-text);
  white-space: nowrap;
  padding: 0 0.5rem;
}

.pag-page-info__sep {
  color: var(--sd-muted);
  font-weight: 400;
}

/* ── Dropdown (Limit + Goto) ─────────────────────────────── */
.pag-dropdown {
  position: relative;
}

.pag-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  font-size: 0.875rem;
  background: rgba(255,255,255,.38);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-radius: var(--sd-radius-base);
  border: 1px solid var(--sd-border-light);
  color: var(--sd-text);
  box-shadow: none;
}

.pag-caret {
  font-size: 0.6em;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

/* Dropdown geöffnet */
.pag-dropdown.is-open .pag-caret {
  transform: rotate(180deg);
}

.pag-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0.375rem 0;
  min-width: 130px;
  background: #ffffff;
  border: var(--sd-border-slim) solid var(--sd-border-subtle);
  border-radius: var(--sd-radius-base);
  box-shadow: var(--sd-shadow);
}

/* Rechts-ausgerichtetes Menü (Goto) */
.pag-dropdown__menu--right {
  left: auto;
  right: 0;
}

.pag-dropdown.is-open .pag-dropdown__menu {
  display: block;
}

.pag-dropdown__item {
  display: block;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  color: var(--sd-text-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.pag-dropdown__item:hover {
  background: var(--sd-border-light);
  color: var(--sd-text);
}

.pag-dropdown__item.is-active {
  background: var(--sd-bg-subtle);
  color: var(--sd-primary);
  font-weight: var(--sd-btn-font-weight);
}

/* Goto-Form hat kein extra margin */
.pag-goto {
  margin: 0;
  padding: 0;
}

/* ── Mobile: Slots stacken ───────────────────────────────── */
@media (max-width: 600px) {
  .pag-wrap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Limit (links) und Goto (rechts) nebeneinander in Zeile 1 */
  .pag-slot--left,
  .pag-slot--right {
    flex: 0 0 auto;
  }

  /* Nav nimmt die volle zweite Zeile ein */
  .pag-slot--center {
    order: -1;   /* Nav kommt zuerst */
    flex: 0 0 100%;
  }
}


@media (max-width: 767.98px) {
  div#ftr-tg-desktop {
    width: fit-content;
    padding-bottom: 1.5rem;
    position: fixed;
    bottom: 50px;
    left: 50%;
    z-index: 11;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
  }

  .button-filter {

  }
}