/*
Theme Name: BREIT Elementor Theme
Theme URI: https://www.breit.work/
Author: Benjamin Reit
Author URI: https://www.breit.work/
Description: Ein einfaches WordPress Theme, das mit Elementor kompatibel ist.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: breit-elementor-theme
*/

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.main-navigation {
    display: flex; /* Ermöglicht horizontale Anordnung der Menüpunkte */
    justify-content: flex-start; /* Menüpunkte linksbündig ausrichten */
    align-items: center; /* Vertikale Ausrichtung der Menüpunkte */
}

.main-navigation ul {
    list-style: none; /* Entfernt die Aufzählungszeichen */
    margin: 0;
    padding: 0;
    display: flex; /* Ermöglicht horizontale Anordnung der Listenelemente */
}

.main-navigation li {
    margin-left: 20px; /* Abstand zwischen den Menüpunkten */
}

.main-navigation li:first-child {
    margin-left: 0; /* Kein Abstand beim ersten Menüpunkt */
}

.main-navigation a {
    display: block; /* Macht den Linkbereich anklickbar */
    padding: 10px 15px; /* Innenabstand für die Links */
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: #333; /* Grundfarbe der Schrift */
}

.main-navigation a:hover {
    color: #007bff; /* Farbe beim Überfahren mit der Maus */
}

/* Submenüs (falls vorhanden) */
.main-navigation .sub-menu {
    position: absolute; /* Ermöglicht das Überlappen anderer Elemente */
    top: 100%; /* Positioniert das Submenü unterhalb des Elternelements */
    left: 0;
    background-color: #f9f9f9; /* Hintergrundfarbe des Submenüs */
    padding: 10px 0;
    border: 1px solid #ccc;
    z-index: 1000; /* Stellt sicher, dass das Submenü über anderen Elementen liegt */
    display: none; /* Standardmäßig ausgeblendet */
}

.main-navigation .sub-menu li {
    margin: 0;
    display: block; /* Jeder Link im Submenü in einer neuen Zeile */
}

.main-navigation .sub-menu a {
    padding: 8px 20px;
    color: #555;
}

.main-navigation .sub-menu a:hover {
    background-color: #eee;
    color: #007bff;
}

.main-navigation li:hover > .sub-menu {
    display: block; /* Submenü anzeigen, wenn das Elternelement überfahren wird */
}

/* Optional: Styling für den "Menü"-Button auf kleineren Bildschirmen */
.menu-toggle {
    display: none; /* Standardmäßig ausgeblendet */
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px;
}

div.site-content {
    display: inline-flex;
}




@media (max-width: 768px) {
    .main-navigation {
        display: none; /* Menü standardmäßig auf kleinen Bildschirmen ausblenden */
        width: 100%;
    }

    .main-navigation.toggled {
        display: block; /* Menü anzeigen, wenn die Klasse "toggled" vorhanden ist */
    }

    .main-navigation ul {
        flex-direction: column; /* Menüpunkte untereinander anordnen */
    }

    .main-navigation li {
        margin-left: 0;
        border-bottom: 1px solid #eee;
    }

    .main-navigation li:last-child {
        border-bottom: none;
    }

    .main-navigation a {
        padding: 15px;
    }

    .menu-toggle {
        display: block; /* Button auf kleinen Bildschirmen anzeigen */
    }
}