:root {
    --gap-width: 1rem;
    --button-active-bg: #e65c00;
    --button-default-bg: #ff6600;
    --button-hover-bg: #e65c00;
}

/* Allgemeine Einstellungen für die blog-Archive-Card */
.blog-archive-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    flex: 0 0 calc(33.333% - 1rem); /* Standard für 3 Spalten */
    box-sizing: border-box;
}

.blog-archive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-width);
}

.columns-1 .blog-archive-card {
    flex: 0 0 100%;
}

.columns-2 .blog-archive-card {
    flex: 0 0 calc(50% - 1rem);
}

.columns-3 .blog-archive-card {
    flex: 0 0 calc(33.333% - 1rem);
}

.columns-4 .blog-archive-card {
    flex: 0 0 calc(25% - 1rem);
}

/* Filter-Button Styling */
.blog-filter-button {
    background-color: var(--button-default-bg);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.blog-filter-button.active {
    background-color: var(--button-active-bg);
}

.blog-filter-button:hover {
    background-color: var(--button-hover-bg);
}

/* Pagination Styling */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination-wrapper a {
    padding: 10px 15px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    margin: 0 5px;
    border-radius: 5px;
}

.pagination-wrapper a:hover {
    background-color: #e65c00;
}

.pagination-wrapper .current {
    background-color: #e65c00;
}