/* MUSIKSCHULE365.DE - Tailwind CSS Mobile Optimierungen */

/* Mobile Optimierungen für Tailwind CSS Klassen */
@media (max-width: 767.98px) {
    /* Container Optimierungen */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Spacing Optimierungen */
    .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1rem !important;
    }
    
    .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    
    .mb-2 {
        margin-bottom: 0.25rem !important;
    }
    
    /* Grid Optimierungen */
    .gap-6 {
        gap: 0.5rem !important;
    }
    
    .gap-8 {
        gap: 0.75rem !important;
    }
    
    /* Card Optimierungen */
    .p-6 {
        padding: 0.75rem !important;
    }
    
    .p-4 {
        padding: 0.5rem !important;
    }
    
    .p-3 {
        padding: 0.5rem !important;
    }
    
    /* Text Größen */
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    
    .text-xl {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }
    
    .text-lg {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }
    
    .text-sm {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }
    
    .text-xs {
        font-size: 0.625rem !important;
        line-height: 0.75rem !important;
    }
    
    /* Spacing zwischen Elementen */
    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.5rem !important;
    }
    
    .space-y-3 > * + * {
        margin-top: 0.375rem !important;
    }
    
    /* Flexbox Optimierungen */
    .ml-4 {
        margin-left: 0.5rem !important;
    }
    
    .mr-2 {
        margin-right: 0.25rem !important;
    }
    
    .mr-3 {
        margin-right: 0.5rem !important;
    }
    
    /* Grid Layouts */
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .lg\:col-span-2 {
        grid-column: span 1 / span 1 !important;
    }
    
    /* Icon Größen */
    .text-xl {
        font-size: 1rem !important;
    }
    
    /* Avatar Größen */
    .w-10 {
        width: 2rem !important;
    }
    
    .h-10 {
        height: 2rem !important;
    }
    
    /* Border Radius */
    .rounded-lg {
        border-radius: 0.375rem !important;
    }
    
    .rounded-full {
        border-radius: 9999px !important;
    }
    
    /* Shadow */
    .shadow-md {
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Border */
    .border {
        border-width: 1px !important;
    }
    
    /* Button Optimierungen */
    .btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
        line-height: 1.5rem !important;
    }
    
    /* Rating Stars */
    .text-yellow-400 {
        color: #fbbf24 !important;
    }
    
    .text-yellow-500 {
        color: #f59e0b !important;
    }
    
    /* Responsive Grid für sehr kleine Bildschirme */
    @media (max-width: 480px) {
        .lg\:grid-cols-4 {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }
        
        .md\:grid-cols-2 {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }
    }
}

/* Tablet Optimierungen */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    .gap-6 {
        gap: 0.75rem !important;
    }
    
    .gap-8 {
        gap: 1rem !important;
    }
    
    .p-6 {
        padding: 1rem !important;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
}