@charset "utf-8";
/* CSS DOKUMENT */

/* STANDARD HEADER */
header {
    position: sticky;
    top: -1px;
    display: flex;
    gap: var(--space-grid);
    padding: 18px 40px;
    z-index: 99;
    background-color: var(--light-blue-rgb);
    backdrop-filter: blur(13px);
        -webkit-backdrop-filter: blur(13px);
        -moz-backdrop-filter: blur(13px);
        -o-backdrop-filter: blur(13px);
    transition: var(--smooth);
}

header div {
    display: flex;
    gap: var(--space-xl);
    width: 100%;
}

.topbar {
    background-color: var(--black);
    padding: 16px 40px 17px 40px;
}

.topbar ul {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: var(--space-m);
}

.topbar ul li a {
    color: var(--light-blue);
    font-size: 14px;
}

.topbar ul li a:hover {
    opacity: .65;
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

nav ul {
    display: flex;
    gap: var(--space-m);
}

nav ul li a {
    color: var(--blue);
    font-size: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--orange);
    display: block;
}

nav ul li a:hover {
    opacity: .65;
}

/* BURGERMENÜ VORDEFINIERUNGEN */
.menu-btn {
    display: none;
}

.menu-icon {
    display: none;
}

.logo {
    transition: var(--smooth);
    border: none;
}

.logo:hover {
    transition: var(--smooth);
    scale: .95;
    border: none;
    opacity: .65;
}

/* BRUGERMENÜ AB 991PX VIEWPORTBREITE */
/* <= 991 px */
@media screen and (max-width: 991px) {
    nav {
        display: none;
    }

    header div {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .menu-icon {
        display: block;
        z-index: 10;
        transition: var(--smooth);
    }

    .menu-icon:hover {
        scale: .85;
        cursor: pointer;
    }

    .logo {
        z-index: 10;
    }

    nav ul li a {
        font-size: 1.5rem;
    }

    nav .button {
        padding: 13px 24px 17px 24px;
        font-size: 1.5rem;
    }

    .menu-btn:checked ~ nav {
        height: 100vh;
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%;
        background: var(--body-color);
        background-image: url('../media/hintergrund/burger-hintergrund.jpg');
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-grid);
    }

    .menu-btn:checked ~ .menu-icon {
        rotate: 90deg;
        transition: var(--smooth);
    }

    .menu li {
        width: fit-content;
    }

    .menu ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}