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

@font-face {
    font-style: normal;
    font-weight: 250 900;
    font-stretch: 100%;
    src: url('../fonts/dist/SkolarSansPEVF-Ups-subset-reduced.woff2')
        format('woff2');
    font-family: 'SkolarSans';
    font-display: swap;
}

:root {
    --color-nav-bg: #000;
    --color-nav-hover-bg: rgb(255 255 255 / 20%);
    --color-nav-text: #fff;
    --color-footer: #222424;
    --color-primary: var(--color-base);

    --color-base: #4da3dd;
    --color-base-text: #000000;
}

#navbar {
    border-bottom: none;
}

#navbar > .menu > .item.active {
    background: rgb(255 255 255 / 10%);
    color: var(--color-base);
}

#navbar > .menu > .item.active:hover {
    background: var(--color-nav-hover-bg);
}

.page-footer {
    border-top: none;
    color: #fff;
}

.full.height:has(#hananils) {
    display: grid;
    grid-template-rows: min-content auto;
    background-color: var(--color-base);
}

body:has(#hananils) {
    display: grid;
    grid-template-rows: auto min-content min-content;
}

#hananils {
    --text-size: clamp(1rem, 5vw, 2.4rem);
    --title-size: calc(var(--text-size) * 2.5);

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6rem 3rem;
    font-family: SkolarSans;
}

#hananils h1 {
    margin-bottom: 1rem;
    font-weight: 900;
    font-size: var(--title-size);
    line-height: 1.1;
}

#hananils h1 em {
    color: #fff;
    font-style: normal;
}

#hananils p {
    margin: 0;
    font-weight: 300;
    font-size: var(--text-size);
    line-height: 1.4;
}

#hananils p a {
    color: #fff;
}

#hananils p:has(a) {
    margin-top: 1.5rem;
}

/* Footer */

#imprint {
    background: #222424;
    padding: 0 20px;
    color: #fff;
}

#imprint > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(255 255 255 / 0.2);
    padding: 2rem 0 1rem;
}