:root, *::before, *::after {
  --ff-sans: mietspiegel, "Merriweather Sans", ui-sans-serif, sans-serif;
  --ff-sans-ch:"Merriweather Sans", ui-sans-serif, sans-serif;
  --ff-sans-alt: mietspiegel, "Raleway", ui-sans-serif, sans-serif;
  --ff-sans-headline: mietspiegel, "Oswald", ui-sans-serif, sans-serif;
  --ff-serif: mietspiegel,"Merriweather", ui-serif, serif;
  --ff-serif-alt: "Lora", ui-serif, serif;
  --ff-hand: "Comic Neue", cursive;
  --ff-deco: "Great Vibes", fantasy;
  --ff-icons: mietspiegel;
}

:root, *::before, *::after {
  --max-body-width: 1000px;
  --main-content-side-padding: 1rem;
  --max-line-length: 70ch;
  --max-textbox-width: calc(var(--max-line-length) + 2 * var(--main-content-side-padding));
  --header-height: clamp(90px, 10vh, 150px);
  --navigation-height: 80px;
  --footer-menu-height: 3em;
  --std-distance: .5rem;
  --std-spacing: 2rem;
  --window-padding: 1rem;
  --logo-safety-frame: 5px;
}

article {
  padding: var(--window-padding);
  width: fit-content;
  margin: 0 auto;
}
article > h2 {
  margin-top: 0.5em;
}
article h2,
article h3 {
  margin-bottom: 0.5em;
  font-weight: 300;
  letter-spacing: 0.05em;
  max-width: var(--max-line-length);
}
article h3 {
  color: var(--std-headline-color);
}
article p {
  margin-top: 0.5em;
  max-width: var(--max-line-length);
}