/* ========================================================
   PAGINATION (CARD-BUTTON STIL)
======================================================== */


/* ========================================================
   6. SEITENANZEIGE & PAGINATION
======================================================== */

.page-indicator-container {
  display: flex;
  justify-content: center;
  align-content: center;
  margin: 30px 0px 20px 0px;
  width: 100%;
}

.page-indicator {
  font-size: 16px;
  font-weight: 800;
  color: #666666;
  padding: 5px 20px 5px 20px;
  border: 1px solid #b1b1b4;
}



.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px 0 20px 0;
    width: 100%;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Basis-Styling der Buttons */
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    background: #fff;
    color: var(--grau, #222);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px; /* Scharfe Kanten im Card-Look */
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    user-select: none;
}

/* Hover-Zustand */
.page-btn:hover:not(.active):not(.disabled) {
    color: var(--rot, #d72222);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

/* Active-State (Aktuelle Seite) */
.page-btn.active {
    background: var(--rot, #d72222);
    color: var(--weiss, #fff);
    border-color: var(--rot, #d72222);
    box-shadow: 0 2px 6px rgba(215, 34, 34, 0.3);
    cursor: default;
}

/* Click-Zustand (Klick/Touch) */
.page-btn:active:not(.active):not(.disabled) {
    transform: translateY(0);
    background: #f0f0f1;
    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
}

/* Deaktivierter Zustand (z.B. Zurück auf Seite 1) */
.page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f9f9f9;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: none;
    pointer-events: none;
}

/* Trennpunkte (...) */
.page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 42px;
    color: var(--grau, #666);
    font-weight: 700;
    font-size: 16px;
    user-select: none;
}

/* optional: Chevrons/Pfeile als SVG-Maske */
.pagination .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.icon-chevron-left {
    mask-image: url("../icons/chevron-left.svg");
    -webkit-mask-image: url("../icons/chevron-left.svg");
}

.icon-chevron-right {
    mask-image: url("../icons/chevron-right.svg");
    -webkit-mask-image: url("../icons/chevron-right.svg");
}