/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

/* Logo */

#logo {
    display: block;
    /* overflow-x: clip; */
    width: 31rem;
    padding-top: 4.15rem;
    font-size: var(--text-size-1);
    font-weight: var(--text-weight-extrablack);
    line-height: var(--text-line-1);
    text-indent: -0.88rem;
    transform: translate(0, 0);
}

@media (min-width: 310px) {
    #logo {
        font-size: 36.129vw; /* 11.2rem / 31rem * 100vw */
        line-height: 35.483vw; /* 11rem / 31rem * 100vw */
        text-indent: -2.8387vw; /* -0.88rem / 31rem * 100vw */
    }
}

@media (min-width: 500px) {
    #logo {
        font-size: 18.0645rem; /* 11.2rem / 31rem * 500px */
        line-height: 17.741rem; /* 11rem / 31rem * 500px */
        text-indent: -1.4192rem; /* -0.88rem / 31rem * 500px */
    }
}

@supports (display: grid) {
    #logo {
        padding-top: calc(4.15rem + 3.8rem);
    }

    @media (min-height: 700px) and (min-width: 500px) {
        #logo {
            padding-top: 4.15rem;
            font-size: var(--text-size-1);
            font-weight: var(--text-weight-extrablack);
            line-height: var(--text-line-1);
            text-indent: -0.88rem;
        }
    }
}

/* Drawer */

.navigation {
    overflow: clip;
    max-width: 100vw;
    padding-bottom: 3.8rem;
    color: var(--color-text-on-dark);
    background-color: var(--color-blue);
    transition:
        transform 0.25s ease-in-out 0.1s,
        opacity 0.1s ease-in 0.1s;
    z-index: var(--z-index-overlay-front);
}

@supports (display: grid) {
    @media (min-height: 700px) and (min-width: 500px) {
        .navigation {
            position: fixed;
            top: 0;
            left: -31rem;
            bottom: 0;
            overflow: hidden;
            width: 31rem;
            background-image: linear-gradient(to left, #39425d 0, #3f4a67 50%);
            transform: translateX(0);
            opacity: 0;
        }

        .toggle-switch:checked + div .navigation {
            transform: translateX(100%);
            opacity: 1;
        }

        @media (min-width: 1400px) {
            .layout:not(.is-collapsed) .navigation {
                left: 0;
                transition: none;
                transform: translateX(0) !important;
                opacity: 1 !important;
            }
        }
    }
}

.navigation a {
    text-decoration: none;
}

/* Navigation */

.navigation nav[aria-label] {
    position: relative;
    margin-bottom: 3.8rem;
    z-index: var(--z-index-overlay-front);
}

.navigation nav[aria-label] ul {
    list-style: none;
}

.navigation nav[aria-label] a {
    display: block;
    padding: 0 3.8rem;
    color: inherit;
    font-size: 1.7rem;
    font-weight: var(--text-weight-normal);
    line-height: 3.52rem;
}

.navigation nav[aria-label] a:hover {
    color: #ef572f;
}

@media (min-width: 310px) {
    .navigation nav[aria-label] a {
        padding: 0 12.258vw; /* 3.8rem / 31rem * 100vw */
    }
}

@media (min-width: 500px) {
    .navigation nav[aria-label] a {
        padding: 0 6.129rem; /* 3.8rem / 31rem * 500px */
    }
}

@media (min-height: 700px) and (min-width: 500px) {
    .navigation nav[aria-label] a {
        padding: 0 3.8rem;
    }
}

/* Categories */

.navigation nav[aria-label='categories'] {
    margin-top: -1rem;
}

.navigation nav[aria-label='categories'] a {
    height: 3.8rem;
    font-size: 3.1rem;
    font-weight: 600;
}

.navigation nav[aria-label='categories'] a.is-active {
    color: #ef572f;
}

@media not ((min-height: 700px) and  (min-width: 500px)) {
    @media (min-width: 310px) {
        .navigation nav[aria-label='categories'] {
            margin-top: -3.2258vw /* -1rem / 31rem * 100vw */;
        }

        .navigation nav[aria-label='categories'] a {
            height: 12.258vw /* 3.8rem / 31rem * 100vw */;
            font-size: 10vw; /* 3.1rem / 31rem * 100vw */
            line-height: 11.3548vw; /* 3.52rem / 31rem * 100vw */
        }
    }

    @media (min-width: 500px) {
        .navigation nav[aria-label='categories'] {
            margin-top: -1.6129rem /* -1rem / 31rem * 500px */;
        }

        .navigation nav[aria-label='categories'] a {
            height: 6.129rem /* 3.8rem / 31rem * 500px */;
            font-size: 5rem; /* 3.1rem / 31rem * 500px */
            line-height: 5.6773rem; /* 3.52rem / 31rem * 500px */
        }
    }
}

/* Pages */

.navigation nav[aria-label='pages'] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navigation nav[aria-label='pages'] li {
    box-sizing: border-box;
    height: 3.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.navigation nav[aria-label='pages'] li[aria-current='page'] {
    color: #ef572f;
    border-top-color: transparent;
    background-color: rgba(0, 0, 0, 0.1);
}

/* Search */

.navigation-search {
    display: flex;
    position: relative;
    overflow: hidden;
    height: 3.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: var(--z-index-overlay-front);
}

.navigation-search label {
    display: inline-block;
    width: calc(3.8rem + 2rem);
    line-height: 3.52rem;
    text-indent: -1600rem;
    background-image: url(../images/icon_search.svg);
    background-repeat: no-repeat;
    background-position: 3.36rem 1.12rem;
    background-size: 1.6rem;
}

.navigation-search input {
    flex-grow: 1;
    appearance: none;
    color: #fff;
    font-size: 1.7rem;
    border: none;
    background-color: transparent;
    outline: none;
}

.navigation-search input::placeholder {
    color: #fff;
    opacity: 1;
}

.navigation-search input:focus::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.navigation-search button {
    position: absolute;
    top: 0;
    right: -3.8rem;
    bottom: 0;
    appearance: none;
    width: 3.8rem;
    height: 3.8rem;
    color: #fff;
    border: none;
    background-color: var(--color-poseidon);
    transition: transform 0.15s ease-in-out 0.15s;
    transform: translateX(0);
}

.navigation-search input:focus + button {
    transform: translateX(-100%);
}