/* Dropdown for Nachhaltigkeit */

.nav-list li.has-submenu {
    position: relative;
    z-index: 50;
}

.nav-list li.has-submenu > a {
    position: relative;
    padding-right: 0.85rem;
}

.nav-list li.has-submenu > a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
}

/* Prevent the existing title-width hack from fighting the caret */
.nav-list li.has-submenu > a::after {
    padding-right: 0.85rem;
}

.nav-list .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1201px) {
    /* Existing .overflow { overflow: hidden } clips absolute dropdowns */
    .nav .overflow,
    .nav-list,
    .nav-list ul {
        overflow: visible;
    }

    .nav-list li.has-submenu {
        display: inline-block;
        vertical-align: middle;
    }

    .nav-list .submenu {
        position: absolute;
        top: calc(100% + 0.45rem);
        left: 50%;
        transform: translateX(-50%);
        min-width: 210px;
        background: #31353e;
        border-radius: 4px;
        padding: 0.45rem 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
        z-index: 40;
    }

    .nav-list .submenu::before {
        content: "";
        position: absolute;
        top: -0.55rem;
        left: 0;
        right: 0;
        height: 0.55rem;
    }

    .nav-list li.has-submenu:hover .submenu,
    .nav-list li.has-submenu:focus-within .submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-list .submenu li {
        display: block;
        margin: 0;
        text-align: left;
    }

    .nav-list .submenu a {
        display: block;
        padding: 0.6rem 1.15rem;
        font-size: 15px;
        letter-spacing: 0.01rem;
        text-align: center;
        white-space: nowrap;
        text-transform: none;
    }

    .nav-list .submenu a::after,
    .nav-list .submenu a::before {
        display: none;
    }

    .nav-list .submenu a:hover {
        letter-spacing: 0.02rem;
        background: rgba(255, 255, 255, 0.07);
    }
}

@media (max-width: 1200px) {
    .nav-list li.has-submenu > a::before {
        display: none;
    }

    .nav-list .submenu {
        display: block;
        width: 100%;
        padding: 0.2rem 0 0;
    }

    .nav-list .submenu li {
        display: block;
        margin: 0.85rem 0;
    }

    .nav-list .submenu a {
        font-size: 15px;
        opacity: 0.85;
        text-transform: none;
    }

    .nav-list .submenu a::after,
    .nav-list .submenu a::before {
        display: none;
    }
}