/* Mobile-First: Basis-Styles gelten für mobile Geräte */

/* Widget Grid - Universelle Grid-Layout-Klasse */
.widget-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Widget Grid 2 Columns - 2 Spalten */
/* Mobile-First: Auf Mobile nur 1 Spalte */
.widget-grid-2 {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Widget Grid 3 Columns - 3 Spalten */
/* Mobile-First: Auf Mobile nur 1 Spalte */
.widget-grid-3 {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Widget Grid Auto Fit - Automatische Anpassung */
/* Mobile-First: Auf Mobile nur 1 Spalte */
.widget-grid-auto-fit {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile-First: Responsive Design - Regel 022: 4 Breakpoints */
/* Basis-Styles gelten für mobile (max-width: 576px) - keine Media Query erforderlich */

/* Tablet/iPad (min-width: 600px) */
@media (min-width: 600px) {
    .widget-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .widget-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .widget-grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

/* Kleiner Desktop/13-Zoll (min-width: 1024px) */
@media (min-width: 1024px) {
    .widget-grid-2 {
        gap: 1.5rem;
    }
    
    .widget-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .widget-grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}

/* Großer Desktop/Widescreen (min-width: 1440px) */
@media (min-width: 1440px) {
    .widget-grid-auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}