/**
 * Frontend CSS - Notfall-Kontakte Dashboard
 */

.fmnk-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 20px;
}

.fmnk-header {
    text-align: center;
    animation: fadeInDown 0.5s ease-out;
}

.fmnk-category-card {
    animation: fadeInUp 0.5s ease-out;
    transition: transform 0.2s, box-shadow 0.2s;
}

.fmnk-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.fmnk-contact {
    transition: all 0.2s;
}

.fmnk-contact:hover {
    background: #edf2f7 !important;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .fmnk-dashboard {
        padding: 10px;
    }
    
    .fmnk-header {
        padding: 30px 20px !important;
    }
    
    .fmnk-header h1 {
        font-size: 24px !important;
    }
    
    .fmnk-category-card {
        padding: 20px !important;
    }
}

/* Print Styles */
@media print {
    .fmnk-header {
        background: #667eea !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .fmnk-btn-primary,
    .fmnk-btn-secondary {
        display: none !important;
    }
}