@font-face {
	font-family: Nunito;
	src: url("./Schrift/Nunito.ttf");
	font-style: normal;
}

@font-face {
	font-family: Nunito;
	src: url("./Schrift/Nunito kursiv.ttf");
	font-style: italic;
}

:root {
	--Abstand_klein: .5em;
	--Abstand: 1em;
	--Abstand_groß: 1.5em;

	--maximale_Breite: 80ch;

	--Farbe_Text: #111;
	--Farbe_Kopfzeile: pink;
	--Farbe_Menü: mistyrose;
	--Farbe_Links: mediumslateblue;
	--Farbe_Fußzeilenlinks: royalblue;
}

html {
	font-family: Nunito, system-ui;
	scroll-behavior: smooth;
	color: var(--Farbe_Text);
}

body {
	margin: 0;
	padding-left: var(--Abstand);
	padding-right: var(--Abstand);
}

/* Kopfzeile */

header {
	z-index: 1;
	position: fixed;
	left: 0;
	background-color: var(--Farbe_Kopfzeile);
	padding: var(--Abstand_klein) var(--Abstand);
	width: calc(100% - 2 * var(--Abstand));
}

#Kopfzeile {
	max-width: var(--maximale_Breite);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

#Kopfzeile > a {
	width: fit-content;
	text-decoration: none;
	color: var(--Farbe_Text);
}

/* Menü */

details {
	width: fit-content;
}

summary {
	cursor: pointer;
	display: inline-block;
	padding: var(--Abstand_klein) var(--Abstand);
	border: 2px solid var(--Farbe_Menü);
	border-radius: 1ch;
}

nav {
	z-index: 2;
	position: absolute;
	margin-top: var(--Abstand);
	transform: translateX(calc(-100% + var(--Breite_Menü)));
	display: grid;
	align-content: start;
	justify-content: left;
	width: fit-content;
	gap: var(--Abstand);
	padding: var(--Abstand_groß);
	background-color: var(--Farbe_Menü);
	border-radius: 1ch;
}

nav > a {
	color: var(--Farbe_Text);
}

/* Inhalte */

main {
	max-width: var(--maximale_Breite);
	margin-inline: auto;
	padding-top: calc(var(--Höhe_Kopfzeile) + var(--Abstand));
	padding-bottom: var(--Abstand);
}

main > h2 {
	scroll-margin-top: calc(var(--Höhe_Kopfzeile) + var(--Abstand));
	margin-top: var(--Abstand);
	margin-bottom: var(--Abstand_klein);
}

main > blockquote {
	font-style: italic;
	margin-inline: var(--Abstand);
}

main a {
	color: var(--Farbe_Links);
}

/* Fußzeile */

footer {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: var(--Farbe_Menü);
	padding-block: var(--Abstand);
}

#Fußzeile {
	max-width: var(--maximale_Breite);
	margin-inline: auto;
	padding-inline: var(--Abstand);
}

#Fußzeile a {
	color: var(--Farbe_Fußzeilenlinks);
}