.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;

    & .page {
        flex-grow: 1;

        & .nuxt-page-wrapper {
            height: 100%;
            justify-content: space-between;
        }
    }
}

.filter-bar {
    background: var(--color-lightest);
    display: flex;
    justify-content: space-between;
    padding: var(--padding-default);

    & > button {
        all: unset;
        cursor: pointer;
        color: var(--color-main-darkest);
        font-weight: bolder;
        font-family: 'Roboto', sans-serif;

        &.active {
            color: var(--color-main-darkest);
        }

        &:not(.active) {
            opacity: .5;
        }
    }
}

.search-bar {
    z-index: 100;

    & p {
        font-weight: 100;
        color: var(--color-lightest);
    }
}

.content {
    overflow: hidden;
    background: var(--color-lightest);
    height: 100%;

    & :is(h1, h2, h3, p, figure):first-of-type {
        margin-top: 0;
    }
}

.content-text {
    padding: var(--padding-xl) var(--padding-default) 0;
    color: var(--color-darkest);
    text-align: center;
}

.info-text {
    padding: 0 var(--padding-default);
    text-align: center;
    width: 100%;
    top: 40%;
    transform: translateY(-50%);
    position: absolute;
}

.Legal, .Wissen {
    padding: var(--padding-l) var(--padding-default);
    color: var(--color-darkest);

    & ul {
        margin: 0 0 0 var(--padding-default);
    }

    & a {
        color: var(--color-main-dark);
        text-decoration: none;
        transition: var(--transition-default);

        &:hover {
            color: var(--color-main-darkest);
        }
    }
}

ul.link-liste {
    list-style: none;
    margin: var(--padding-default) 0 0;
    
    & a {
        text-decoration: none;
        color: var(--color-text)
    }
}