/* NORMALIZE */

*,
*::before,
*::after {
	box-sizing: border-box;
}

*:not(dialog) {
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}
p {
	text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	font-weight: normal;
	font-size: 1em;
}
a {
	color: currentColor;

	&:hover,
	&:focus {
		text-decoration: none;
		color: var(--color-active);
	}
}

.skip-link {
	position: absolute;
	top: -30px;
}

.skip-link:focus-visible {
	top: 5px;
}

/* EINBUCHLESEN */

@font-face {
  font-family: 'GaraBeta';
  font-weight: normal;
  font-style: normal;
  src: url("../font/GaraBeta0.2-Regular.191a91989aec.woff2") format('woff2');
}
@font-face {
  font-family: 'GaraBeta';
  font-weight: normal;
  font-style: italic;
  src: url("../font/GaraBeta0.2-RegularItalic.2907ee75ea5f.woff2") format('woff2');
}
@font-face {
  font-family: 'GaraBeta';
  font-weight: bold;
  font-style: italic;
  src: url("../font/GaraBeta0.2-BookItalic.c4d3d6c541c7.woff2") format('woff2');
}
@font-face {
  font-family: 'GaraBeta';
  font-weight: bold;
  font-style: normal;
  src: url("../font/GaraBeta0.2-Bold.0818154fc6c7.woff2") format('woff2');
}

html {
	--color-active: #D22229;

	font-family: 'GaraBeta', ui-serif, serif;
	font-size: 18px;
	line-height: 1.1667;
	-webkit-font-smoothing: antialiased;
}

body {
	min-height: 100vh;
	padding: 2%;
	display: flex;
	flex-direction: column;

	@media (min-width: 601px) {
		padding: 1%;
	}
}

#header, #footer {
  flex-shrink: 0;
}

#header {
	margin-bottom: 1.1667em;

	nav {
		display: flex;
		justify-content: space-between;	

		ul {
			padding: 0;
			display: flex;
			flex-direction: column;
			
			&.blog {
				justify-content: space-between;
			}

			&.infopages {
				flex-direction: column;
			}

			li {
				list-style: none;
				display: block;

				a {
					display: block;
					text-decoration: none;
				}
			}
		}
	}

	@media (min-width: 801px) {
		nav {
      gap: 2em;

			ul {
				flex-direction: row;

				&.blog {
					flex-grow: 1;
					
				}
			}
		}
	}
	@media (min-width: 1201px) {
		nav {
      gap: 0;

			ul {
				

				&.blog {
					flex-basis: 75%;
					flex-grow: 0;

					li {
						flex: 1 1 0px;
					}
				}
				&.infopages {
					flex-basis: calc(25% - 3 * 5px);	/* adds columns' gaps from grid */
				}
			}
		}
	}
}

main {
	hyphens: auto;
}

.current {
  text-decoration: none;
	color: var(--color-active);
}