/* Grundlayout */
.f3-widget-paginator {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
    display: inline-flex;
    gap: .25rem;
}

/* jedes Element */
.f3-widget-paginator li {
    display: inline-block;
}

/* Links und „normale“ Seiten */
.f3-widget-paginator li a,
.f3-widget-paginator li span {
    display: block;
    padding: .375rem 1.25rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    text-decoration: none;
    color: #016DB0;          /* deine Grün-Farbe */
    background-color: #fff;
}

/* Falls li.current vorhanden */
.f3-widget-paginator li.current span {
    border-color: #006e40 !important;  /* Dunklerer Rand für Kontrast */
}

/* Hover-Effekt für Links */
.f3-widget-paginator li a:hover {
    background-color: #e9ecef;
    text-decoration: none;
}

/* Sicherstellen, dass li-Element nicht beeinflusst */
.f3-widget-paginator li {
    line-height: 1 !important;
}

/* Für li.current */
.f3-widget-paginator li.current span,
.f3-widget-paginator li.current {
    background-color: #008a50 !important;
    color: #fff !important;
    border: 2px solid #008a50 !important;
    border-radius: .5rem !important;
    box-shadow: 0 0 0 .2rem rgba(0,138,80,.5) !important;
}

/* Für Bootstrap-Variante */
.f3-widget-paginator .page-item.current span,
.f3-widget-paginator .page-item.active span {
    background-color: #008a50 !important;
    border-color: #008a50 !important;
    color: #fff !important;
}