/* ==========================================================================
   Abenteuer Portfolio Filter - Square 3-Column Grid (Sina Möller Design)
   ========================================================================== */

/* Container für die Filter-Buttons */
.af-portfolio-filter {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 15px 0 35px 0 !important;
    width: 100% !important;
}

/* Perfekt abgerundete Pill-Buttons */
.af-filter-btn {
    background-color: #faf8f5 !important;
    border: 1px solid #e3ded8 !important;
    color: #4a443f !important;
    padding: 10px 26px !important;
    border-radius: 50px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    outline: none !important;
}

.af-filter-btn:hover {
    background-color: #ffffff !important;
    border-color: #c9bfb5 !important;
    color: #2b2623 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
}

.af-filter-btn.active {
    background-color: #8c9b88 !important;
    border-color: #8c9b88 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(140, 155, 136, 0.35) !important;
}

/* 
 * QUADRATISCHES 3ER-GRID FÜR DEN GEFILTERTEN ZUSTAND
 */
.gallery.af-is-filtering,
.elementor-image-gallery .gallery.af-is-filtering {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
}

.gallery.af-is-filtering br {
    display: none !important;
}

/* Exakt 3 Spalten auf Desktop (33.33% abzüglich Gap) */
.gallery.af-is-filtering .gallery-item {
    float: none !important;
    clear: none !important;
    width: calc(33.333% - 11px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Bilder: Perfekt quadratisch, eckig & lückenlos */
.gallery.af-is-filtering .gallery-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Erzwingt ein perfektes Quadrat */
    object-fit: cover !important;  /* Passt den Bildausschnitt ohne Verzerrung an */
    border-radius: 0 !important;    /* Absolut eckig */
    display: block !important;
}

/* Responsive Anpassungen für Mobile & Tablet */
@media (max-width: 800px) {
    .gallery.af-is-filtering .gallery-item {
        width: calc(50% - 8px) !important; /* 2-spaltig auf Tablets */
    }
}

@media (max-width: 480px) {
    .af-portfolio-filter {
        gap: 8px !important;
    }
    .af-filter-btn {
        padding: 8px 18px !important;
        font-size: 0.85rem !important;
    }
    .gallery.af-is-filtering .gallery-item {
        width: 100% !important; /* 1-spaltig auf kleinen Smartphones */
    }
}