@font-face {
  font-family: 'Mona Sans';
  src:
    url('../fonts/MonaSansVF-Regular.woff2') format('woff2 supports variations'),
    url('../fonts/MonaSansVF-Regular.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

:root {
    --font-sans: "Mona Sans", sans-serif;
}

header {
    padding-top: var(--gap );
	
    h1 {
        margin: 0;
        font-weight: 900;
    }
}

nav {
    padding: var(--gap) 0;
	margin-block-end: var(--gap);
}

.nav-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);

    @media (width < 800px) {
        display: block;
    }
}

.nav-item {
    text-align: center;
    padding: 0.25em 0.5em;
    border-bottom: 0.1em solid var(--color-accent-4);

    &.active {
        border-color: lightblue;
    }

    &:hover {
        background-color: lightblue;
        border-color: lightblue;
        color: inherit;
    }

    @media (width < 800px) {
        display: block;
    }
}

:where(h2, h3, h4, h5, h6) {
    font-weight: 725;
}

.img-grid {
    margin-top: var(--gap);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);

    @media(width<800px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media(width<500px) {
        grid-template-columns: repeat(1, 1fr);
    }


    img {
        height: 300px;
        width: 100%;
        object-fit: cover;
    }
}

.grundgriss-grid img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

iframe {
    width: 100%;
    height: 880px;
}

input {
    margin-bottom: var(--gap);
}

input[type="submit"] {
    margin: var(--gap) 0;
}

:where(header, footer) a {
    text-decoration: none;
}

blockquote :where(ol, ul) {
	margin-inline-start: calc(var(--gap) * 2);	
}