/* =====================================
   HAUPTNAVIGATION
===================================== */

nav.hauptnavigation {
    background: #1959a6;
    padding: 12px 18px;
    margin: 15px 0 0;
    border-radius: 10px 10px 0 0;
}

nav.hauptnavigation ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    list-style: none;
    padding: 0;
    margin: 0;
}

nav.hauptnavigation li {
    margin: 0;
    padding: 0;
}

nav.hauptnavigation a {
    display: block;
    padding: 10px 18px;

    color: #ffffff;
    font-weight: bold;
    text-decoration: none;

    border-radius: 7px;
    transition: background 0.2s;
}

nav.hauptnavigation a:hover {
    background: #3475c3;
}




/* Untermenüs HTML und SQL */

.html-menu,
.sql-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    background: #edf3fb;
    padding: 15px 18px;
    margin: 0 0 30px;

    border: 1px solid #dce6f3;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* Links der Untermenüs */

.html-menu a,
.sql-menu a {
    display: inline-block;
    padding: 9px 14px;

    background: #ffffff;
    color: #1959a6;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid #d7e3f2;
    border-radius: 7px;

    transition: all 0.2s;
}

.html-menu a:hover,
.sql-menu a:hover {
    background: #1959a6;
    color: #ffffff;
    border-color: #1959a6;
}

/* Kleine Bildschirme */

@media (max-width: 700px) {

    body > nav:not(.html-menu):not(.sql-menu) {
        padding: 10px;
        gap: 5px;
    }

    body > nav:not(.html-menu):not(.sql-menu) a {
        padding: 8px 12px;
        font-size: 14px;
    }

    .html-menu,
    .sql-menu {
        padding: 12px;
        gap: 7px;
    }

    .html-menu a,
    .sql-menu a {
        font-size: 13px;
        padding: 8px 10px;
    }
}


/* CSS-LERNBEREICH */

.css-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    background: #edf3fb;
    padding: 15px 18px;
    margin: 0 0 30px;

    border: 1px solid #dce6f3;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.css-menu a {
    display: inline-block;
    padding: 9px 14px;

    background: #ffffff;
    color: #1959a6;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid #d7e3f2;
    border-radius: 7px;

    transition: all 0.2s;
}

.css-menu a:hover {
    background: #1959a6;
    color: #ffffff;
    border-color: #1959a6;
}

@media (max-width: 700px) {
    .css-menu {
        padding: 12px;
        gap: 7px;
    }

    .css-menu a {
        font-size: 13px;
        padding: 8px 10px;
    }
}


/* =====================================
   PHP – UNTERMENÜ
===================================== */

.php-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    background: #edf3fb;
    padding: 15px 18px;
    margin: 0 0 30px;

    border: 1px solid #dce6f3;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.php-menu a {
    display: inline-block;
    padding: 9px 14px;

    background: #ffffff;
    color: #1959a6;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid #d7e3f2;
    border-radius: 7px;

    transition: all 0.2s;
}

.php-menu a:hover {
    background: #1959a6;
    color: #ffffff;
    border-color: #1959a6;
}

@media (max-width: 700px) {
    .php-menu {
        padding: 12px;
        gap: 7px;
    }

    .php-menu a {
        padding: 8px 10px;
        font-size: 13px;
    }
}


/* ========================================
   MOBILE NAVIGATION – HTML, CSS, PHP, SQL
   ======================================== */

   @media screen and (max-width: 600px) {

    /* Hauptnavigation */
    nav {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Menüpunkte umbrechen */
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        margin: 0;
        list-style: none;
    }

    nav li {
        min-width: 0;
    }

    nav a {
        display: block;
        box-sizing: border-box;
        max-width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        text-align: center;
        overflow-wrap: break-word;
    }

    /* Untermenüs innerhalb der Bildschirmbreite */
    .submenu,
    .subnav,
    .php-menu,
    .menu-container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .submenu ul,
    .subnav ul,
    .php-menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .submenu a,
    .subnav a,
    .php-menu a {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Horizontales Überlaufen vermeiden */
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
}