@media screen and (min-width: 1150px) {
    .mobile{
        display: none;
    }

    nav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        height: 60px;

        margin: 10px 50px 10px 10px;

    }

    .navList {
        list-style-type: none; /* Aufzählungszeichen */

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        height: 100%;
    }

    .navList li {
        position: relative; /* Erforderlich für die absolute Positionierung der Dropdown-Inhalte */
        height: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    nav a:hover{
        transition: 0.2s;
        transform: scale(1.1);
    }

    nav a {
        font-weight: bolder;
        transition: 0.2s;

        transfrom: scale(1);

        font-size: 1.2em;

        margin: 0 10px 0 10px;
    }

    .langNav{
        padding-left: 15px;
    }

    .dropdown-content.industries{
        right: 200px;
    }

    .dropdown-content.products{
        right: 50px;
    }

    /* Dropdown-Styling */
    .dropdown-content {
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: end;

        overflow: hidden;

        position: fixed;
        top: 50px;
        height: 0;
        width: 100%;

        padding-right: 50px;
        list-style-type: none; /* Anderer Aufzählungstyp für die Unterliste */
        z-index: 1;

        transition: height 0.2s ease;
    }

    /* Dropdown anzeigen beim Hovern */
    .dropdown:hover .dropdown-content {
        height: 45px;
    }

    .dropdown-content a {
        opacity: 0;
        transition: opacity 0.1s ease;

        font-size: 1em;
    }

    .dropdown:hover .dropdown-content a {
        opacity: 1;
        transition: opacity 0.1s ease 0.2s;
    }
}

/* Mobile Navigationsleiste - Media Query für Bildschirme bis 800px */
@media (max-width: 1150px) {
        /*
    styling of the checkbox to expand the navbar
    */
    #navCheck {
        display: none;
    }

    #navCheck:checked + .navButton > span {
        transform: rotate(45deg);
    }

    #navCheck:checked + .navButton > span::before {
        top: 0;
        transform: rotate(0deg);
    }

    #navCheck:checked + .navButton > span::after {
        top: 0;
        transform: rotate(90deg);
    }

    #navCheck:checked ~ .navBox {
        left: 0 !important;
    }

    .navButton {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 99;
    }

    .navButton > span,
    .navButton > span::before,
    .navButton > span::after {
        display: block;
        position: absolute;
        top: 10px;
        width: 100%;
        height: 2px;
        background-color: #616161;
        transition-duration: .5s;
    }

    .navButton > span::before {
        content: '';
        top: -8px;
    }

    .navButton > span::after {
        content: '';
        top: 8px;
    }

    /*
    styling of the navbar elements
    */

    nav{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: fixed;
        top: 100px;
        left: 0;

        width: 0;

        background-color: var(--blue);
        overflow: hidden;

        transition: width 0.5s ease;

        z-index: 10;
    }

    #navCheck:checked ~ nav {
        width: 200px;
    }

    .navList{
        list-style-type: none; /* Aufzählungszeichen */

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    .navList li {
        width: 178px;

        border: 1px solid white;
        padding: 10px;
    }

    .navList p{
        color: white;
    }


    nav a {
        color: white;
        font-weight: bolder;

        margin: 0 10px 0 10px;

        font-size: 1.2em;
    }

    .langNav{
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .dropdown{
        position: relative;
        transition: height 2s ease;

        height: auto;
    }

    .dropdown-content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        overflow: hidden;

        height: 0;

        transition: height 2s ease;

        margin: 0;
    }

    .dropdown-content li {
        width: 150px;
        border: none;
        padding-top: 15px;

        font-size: 0.8em;
    }



    /*
    styling of the checkbox to expand the dropdown
    */
    .dropdownCheck {
        display: none;
    }

    .dropdownCheck:checked + .dropdownButton > span {
        transform: rotate(45deg);
    }

    .dropdownCheck:checked + .dropdownButton > span::before {
        top: 0;
        transform: rotate(0deg);
    }

    .dropdownButton {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 22px;
        height: 22px;
        cursor: pointer;
        z-index: 99;
    }

    .dropdownButton > span,
    .dropdownButton > span::before{
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: white;
        transition-duration: .5s;
    }

    .dropdownButton > span{
        top: 12px;
    }

    .dropdownButton > span::before {
        content: '';
        top: 0;
        rotate: 90deg;
    }

    .dropdownCheck:checked ~ .dropdown-content {
        height: auto;
        transition: height 2s ease;
    }
}