/*Vars*/

:root{
    --multiply-2: 2;
}

/*Format*/

.sizedwrap{
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

main,
footer{

    address{
        font-style: normal;
    }
    
    ul{
    --marker-size: 1.65em;
    --marker-bg: var(--wp--preset--color--ci);
    --marker-color: var(--wp--preset--color--light);
    --marker-gap: .85em;

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

        li {
            position: relative;
            padding-left: calc(var(--marker-size) + var(--marker-gap));
            margin-bottom: 12px;

            :before {
                content: ">";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);

                display: flex;
                align-items: center;
                justify-content: center;

                width: var(--marker-size);
                height: var(--marker-size);

                background: var(--marker-bg);
                color: var(--marker-color);

                border-radius: var(--wp--custom--border-radius);

                font-size: calc(var(--marker-size) * 0.65);
                font-weight: 700;
                line-height: 1;
            }
        }
    }

}

/*Nav*/

.stickynav{

    --sized: 200px;

    position: fixed;
    width: 100%;
    top: 0;
    background: rgb(from var(--wp--preset--color--light) r g b / 0);
    z-index: 10;

    padding: 2rem 0;

    transition: var(--wp--custom--main-trans);
  

    .sized{
        width: var(--sized);
    }
    .wrapper{
        max-width: var(--wp--style--global--content-size);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav-secondary{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 1em;

            a{
                border-radius: var(--wp--custom--border-radius);
                transform: var(--wp--custom--main-trans);
                color: var(--wp--preset--color--light);
                background: var(--wp--preset--color--accent);

                font-size: .8em;

                padding-top: .5em;
                padding-right: 1em;
                padding-bottom: .5em;
                padding-left: 1em;


                 &:hover{
                    background: var(--wp--preset--color--ci);
                }
            }

            .speciallink{
                margin-left: var(--wp--preset--spacing--mainpadding);

                a{
                    background: var(--wp--preset--color--ci);

                    &:hover{
                        background: var(--wp--preset--color--accent);
                    }
                }
            }
        }
    }
}

aside{
    .nav-main {
        --menu-bg: #105463;
        --menu-line: #fff;
        --menu-radius: 90px;
        --menu-gap: 7px;

        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--menu-line);
    }

    .nav-main > li {
        position: relative;
        margin-bottom: var(--menu-gap);
        background: var(--menu-bg);
        border-bottom-right-radius: var(--menu-radius);
        overflow: hidden;
    }

    .nav-main > li:last-child {
        margin-bottom: 0;
    }

    .nav-main > li > a {
        display: flex;
        align-items: center;
        min-height: 2em;
        padding: 1rem;

        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-size: clamp(1.5rem, 4vw, 2rem);
        font-weight: 300;
        line-height: 1.2;
    }
}

#main-menu {
    /* Popover Reset */
    margin: 0;
    inset: auto;
    border: 0;
    padding: 2rem;

    /* Native Anchor Positioning */
    position-area: bottom span-left;
    justify-self: end;

    /* Design */
    width: min(400px, 90vw);
    background: var(--wp--preset--color--ci);
    color: var(--wp--preset--color--light);

    /* Geschlossener Zustand */
    opacity: 0;
    translate: 0 -12px;

    /* Animation */
    transition:
        opacity 300ms ease,
        translate 300ms ease,
        display 300ms allow-discrete,
        overlay 300ms allow-discrete;
}

/* Geöffnet */
#main-menu:popover-open {
    opacity: 1;
    translate: 0 0;
}

/* Initiales Einblenden */
@starting-style {
    #main-menu:popover-open {
        opacity: 0;
        translate: 0 -12px;
    }
}

/* Optionaler Hintergrund */
#main-menu::backdrop {
    background: rgb(0 0 0 / 0);

    transition:
        background 300ms ease,
        display 300ms allow-discrete,
        overlay 300ms allow-discrete;
}

#main-menu:popover-open::backdrop {
    background: rgb(0 0 0 / 0);
}

@starting-style {
    #main-menu:popover-open::backdrop {
        background: rgb(0 0 0 / 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #main-menu,
    #main-menu::backdrop {
        transition: none;
    }
}

.scrolled{
    .stickynav{
        background: rgb(from var(--wp--preset--color--light) r g b / .8);
    }
}

/*Head*/

/*Main*/

/*Footer*/

footer{
    position: relative;
    padding: var(--wp--preset--spacing--mainpadding) 0;

    background: var(--wp--preset--color--ci);
    color: var(--wp--preset--color--light);

    border-top-right-radius: calc(var(--multiply-2) * var(--wp--preset--spacing--mainpadding));

    a{
        color: var(--wp--preset--color--light);
    }

     ul{
        --marker-bg: var(--wp--preset--color--light);
        --marker-color: var(--wp--preset--color--ci);
     }
}