@keyframes topToBottom {
    0% {
        opacity: 0;
        transform: rotateX(-90deg)
    }

    100% {
        opacity: 1;
        transform: rotateX(0)
    }
}

un-nav[data-theme=haerer-geruestbau] {
    display: flex;
    flex-direction: column;
    align-items: end;
    row-gap: 1rem
}

un-nav[data-theme=haerer-geruestbau] .trigger {
    /*! margin: 0 1.5rem; */
}

un-nav[data-overlay=true][data-broken=true]>ul.content {
    flex-direction: column;
    justify-content: right;
    align-items: end;
    gap: .5rem;
    margin-left: -10px;
    text-align: center;
    width: fit-content;
    padding: 1rem 2rem;
    right: 0;
    top: 150%;
    backdrop-filter: brightness(25%);
    outline: thin solid var(--complementary);
    outline-offset: var(--borders-offset)
}

un-nav[data-theme=haerer-geruestbau] li {
    flex-basis: max-content;
    position: relative;
    /*! outline: solid thin black; */
    outline-width: thin;
    outline-style: solid;
    outline-offset: 2px;
    outline-color: var(--borders);
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: 0 0 0 0 #000;
    padding: 6px 12px;
    text-transform: none;
    transition-property: transform,box-shadow;
    transition-delay: 0s;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    background-color: var(--background);
    color: #000;
    font-size: large;
    /*! width: 204px; */
    font-weight: 500;
    width: max-content
}

un-nav[data-theme=haerer-geruestbau] li.current-location::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 100%;
    border-bottom: 1px solid var(--borders);
    width: calc(100% + 50px)
}

un-nav[data-theme=haerer-geruestbau] li::before {
    content: '';
    display: none;
    position: absolute;
    top: 100%;
    right: 12px;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: #000;
    width: 60%
}

un-nav[data-theme=haerer-geruestbau] li.current-location {
    background-color: var(--complementary)
}

un-nav[data-theme=haerer-geruestbau] li:active {
    background-color: var(--complementary-white-60);
    outline: thin solid black;
    outline-offset: 0px
}

un-nav[data-theme=haerer-geruestbau] li:active a {
    text-decoration-color: var(--complementary-white-70)
}

un-nav[data-theme=haerer-geruestbau][data-overlay=true][data-broken=true] li {
    background-color: var(--background);
    outline-width: 1px;
    outline-color: var(--complementary);
    outline-style: solid;
    color: #000;
    border-radius: 2px;
    border: 1px solid #000;
    font-size: medium
}

un-nav[data-theme=haerer-geruestbau][data-overlay=true][data-broken=true] li.current-location {
    background-color: var(--primary)
}

un-nav[data-theme=haerer-geruestbau][data-overlay=true][data-broken=true] li.current-location::before {
    border-bottom: 1px solid var(--complementary);
    bottom: -4px
}

un-nav[data-theme=haerer-geruestbau] a {
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-color: var(--complementary);
    color: inherit;
    text-align: right;
    text-wrap: pretty
}

@media (min-width: 640px) {
    un-nav[data-theme=haerer-geruestbau][data-overlay=true][data-broken=true] .content {
        top:102%;
        right: 7%
    }
}

@media (min-width: 1024px) {
    un-nav[data-theme=haerer-geruestbau] {
        border:1px solid var(--borders)
    }

    un-nav[data-theme=haerer-geruestbau] .content {
        flex-direction: column;
        align-items: end;
        text-align: right;
        flex-wrap: nowrap;
        row-gap: .78rem
    }
}

@media (hover: hover) {
    un-nav[data-theme=haerer-geruestbau] li:hover::before {
        content:'';
        display: block;
        position: absolute;
        bottom: -3px;
        left: 0;
        border-bottom: thin solid var(--borders);
        width: calc(100% + 31px)
    }

    un-nav[data-theme=haerer-geruestbau] li:hover {
        background-color: var(--complementary)
    }

    un-nav[data-theme=haerer-geruestbau][data-overlay=true][data-broken=true] li:hover {
        background-color: #f5f5f5;
        background-color: color-mix(in oklab,var(--complementary) 0%,#fff);
        outline: thin solid black;
        outline-offset: 0px
    }
}

un-nav:not(:defined) {
    display: none
}

un-nav {
    width: 100%;
    height: 100%;
    min-width: min-content;
    display: flex;
    flex-direction: row-reverse;
    z-index: 1
}

un-nav[data-state=off]>ul {
    display: none
}

un-nav .content,un-nav[data-state=on] .content {
    display: flex
}

un-nav>.trigger {
    display: none
}

un-nav[data-dropdown=true]>.trigger {
    display: block
}

un-nav[data-dropdown=breakpoint][data-broken=true]>.trigger {
    display: block
}

un-nav>.content {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%
}

un-nav[data-overlay=true][data-state=on][data-broken=true]>.content {
    position: absolute;
    /*! top: 101%; */
    z-index: 2
}

@media (min-width: 1024px) {
    un-nav {
        height:fit-content
    }

    un-nav[data-sticky=true] {
        position: sticky;
        top: 0
    }

    un-nav[data-sticky=smart] {
        position: sticky;
        top: 0;
        opacity: 1
    }

    un-nav[data-sticky=smart].scroll-up,un-nav[data-sticky=smart]:focus-within {
        transform: translateY(0)
    }

    un-nav[data-sticky=smart].stuck.scroll-down {
        transform: translateY(-100%);
        opacity: 0
    }
}

un-nav[data-justify=left]>ul {
    align-items: flex-start;
    border-left: thin solid #000
}

un-nav[data-justify=center]>ul {
    align-items: center
}

un-nav[data-justify=right]>ul {
    align-items: flex-end;
    border-right: 1px solid #000
}

un-nav[data-justify=left]>ul {
    justify-content: left
}

un-nav[data-justify=center]>ul {
    justify-content: center
}

un-nav[data-justify=right]>ul {
    justify-content: right
}

un-nav[data-state=on][data-anim=topdown]>ul>li {
    opacity: 0;
    animation-name: topToBottom;
    animation-duration: .3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards
}

un-nav[data-state=on][data-anim=topdown]>ul>li:first-child {
    animation-delay: -.1s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(2) {
    animation-delay: 0s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(3) {
    animation-delay: .1s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(4) {
    animation-delay: .2s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(5) {
    animation-delay: .3s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(6) {
    animation-delay: .4s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(7) {
    animation-delay: .5s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(8) {
    animation-delay: .6s
}

un-nav[data-state=on][data-anim=topdown]>ul>li:nth-child(9) {
    animation-delay: .7s
}

un-nav[data-theme=""] {
    column-gap: 8px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    border-bottom: thin solid #000
}

un-nav[data-theme=""][data-sticky].stuck {
    box-shadow: 1px 1px 3px #000
}