/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author: UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* Add your own styles here: */


/* Styling für das Kategorie-Menü auf mobilen Geräten (Black Outline Button Optik) */
@media (max-width: 768px) {
    
    /* Die Menü-Liste als Flexbox anordnen */
    ul#menu-projekte-kategorie {
        display: flex;
        flex-wrap: wrap; /* Erlaubt den Umbruch in die nächste Zeile */
        gap: 10px; /* Abstand zwischen den Buttons */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* Standard-Abstände der Listenpunkte entfernen */
    ul#menu-projekte-kategorie li {
        margin: 0;
        padding: 0;
        flex: 1 1 auto; /* Lässt die Buttons flexibel den Platz ausfüllen */
    }

    /* Das eigentliche Button-Design für die Links */
    ul#menu-projekte-kategorie li a {
        display: block;
        text-align: center;
        padding: 10px 20px; /* Innenabstand anpassen, falls dein style_9 anders ist */
        border: 2px solid #000; /* Schwarze Kontur */
        color: #000; /* Schwarze Schrift */
        background-color: transparent;
        text-decoration: none;
        font-weight: 600; /* Schriftstärke */
        border-radius: 0px; /* Auf 50px ändern, falls du abgerundete Buttons hast! */
        transition: all 0.3s ease;
    }

    /* Hover-Effekt und aktiver Status (welche Kategorie gerade offen ist) */
    ul#menu-projekte-kategorie li a:hover,
    ul#menu-projekte-kategorie li.current-menu-item a,
    ul#menu-projekte-kategorie li.current_page_item a {
        background-color: #000;
        color: #fff;
    }
}