/* --- RESPONSIVE ADJUSTMENTS (Apfelmonster Edition) --- */

@media (max-width: 768px) {
    /* Header auf Vertikal umstellen */
    .monster-nav {
        padding: 20px 10px 40px;
        clip-path: ellipse(200% 100% at 50% 0%); /* Flachere Rundung für Mobile */
    }

    .logo-text {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }

    /* Navigation: Buttons zentrieren und Abstände verringern */
    .nav-container {
        gap: 10px;
        padding: 0 5px;
    }

    .nav-item {
        padding: 8px 15px;
        font-size: 0.85rem;
    }

    /* Hero Section: Platz sparen */
    .hero-title {
        font-size: 2.2rem !important; /* !important falls Inline-Styles stören */
        line-height: 1.2;
    }

    .hero-section {
        margin: 15px;
        padding: 40px 15px;
        border-radius: 30px; /* Rundung etwas dezenter auf Mobile */
    }

    /* Hero Buttons untereinander stapeln */
    .hero-btns {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .hero-btns .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Rezept-Grid: Eine Karte pro Zeile */
    .recipe-grid {
        grid-template-columns: 1fr !important; 
        gap: 25px;
    }

    .recipe-card {
        margin: 0 5px;
    }
}

/* Optimierung für sehr schmale Bildschirme (z.B. iPhone SE) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem !important;
    }
    
    .logo-text {
        font-size: 1.5rem;
    }

    .footer-monster {
        font-size: 2rem;
    }
}