/* ============================================================
   GLOBALE STYLES & HEADER
   ============================================================ */
body { background-color: #faf7fc; }

:root { --ast-global-color-5: #faf7fc; }

.site-header, .main-header-bar, .ast-primary-header-bar, .ast-main-header-wrap {
    background-color: #faf7fc !important;
    box-shadow: none !important;
}

/* ============================================================
   LAYOUT WRAPPER (Vertikaler Fluss)
   ============================================================ */
.mf-filter-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* Alle Haupt-Elemente auf volle Breite */
.mf-searchbar, 
.mf-categories-container,
.mf-results-section {
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   SUCHFELD
   ============================================================ */
.mf-searchbar {
    background: #f7f1fa;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.mf-searchbar input {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(170, 143, 178, 0.2);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
}

/* ============================================================
   KATEGORIE-BOXEN (Volle Breite, untereinander)
   ============================================================ */
.mf-category-box {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 5px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.mf-category-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

/* Level-spezifische Farben & Einrückungen (nur Inhalt) */
.mf-category-box[data-level="0"] { border-left-color: #d3a6e2; }
.mf-category-box[data-level="1"] { background: #fbe7f0; border-left-color: #e38ab5; }
.mf-category-box[data-level="2"] { background: #f7d8e8; border-left-color: #cf6a9f; }

.mf-category-box[data-level="1"] .mf-category-title { padding-left: 20px; }
.mf-category-box[data-level="2"] .mf-category-title { padding-left: 40px; }

/* Status: Aktiv/Pfad */
.mf-category-box.mf-active { background: #d9b4e8 !important; color: white; }
.mf-category-box.mf-path { border-left-style: double; border-left-width: 8px; }

.mf-category-icon {
    width: 36px;          /* Feste Breite für das Icon */
    height: 36px;         /* Feste Höhe (quadratisch) */
    border-radius: 6px;   /* Leicht abgerundete Ecken */
    object-fit: cover;    /* WICHTIG: Schneidet das Bild mittig zu, ohne es zu quetschen */
    object-position: center; 
    flex-shrink: 0;       /* Verhindert, dass das Bild bei langem Text zusammengedrückt wird */
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
	
/* ============================================================
   ERGEBNIS-GRID (2 Spalten Desktop / 1 Spalte Mobil)
   ============================================================ */
.mf-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.mf-result-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.mf-result-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.mf-result-title { font-size: 1.2rem; color: #4a2e57; margin-bottom: 1rem; }

.mf-edd-button {
    background: #d19adf;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-align: center;
    text-decoration: none;
    margin-top: auto;
}

/* RESPONSIVE */
@media (max-width: 850px) {
    .mf-results-grid { grid-template-columns: 1fr; }
}

/* LOADER */
.mf-loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f3d6e8;
    border-top-color: #d46fa8;
    border-radius: 50%;
    animation: mf-spin 0.8s linear infinite;
    margin: 3rem auto;
}
@keyframes mf-spin { to { transform: rotate(360deg); } }