/* space-grotesk-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* space-grotesk-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Breakpoints: 640 / 960 / 1200 / 1600 */

html { background-color: #222424; color: #c94b17; }
body { font-family: 'Space Grotesk'; font-size: 18px; }
h1, h2, h3, h4 { color: #c94b17; font-family: 'Space Grotesk'; }
h1 { font-size: 50px; font-weight: 700; }
a { color: #c94b17; text-decoration: underline; }
a:hover { color: #fff; }

header { background-color: rgba(34,36,36,0); }

.res-logo { width: 160px; }

main { margin-bottom: 250px; margin-top: -75px; }

footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(34,36,36,0); text-align: center; padding: 15px 0 0 0; }
footer nav ul { margin: 0; padding: 0; }
footer nav ul li { display: inline-block; }
footer nav ul li a { border: 2px solid #c94b17; color: #c94b17; background-color: #222424; text-decoration: none; display: block; padding: 4px 15px; margin: 0 5px; border-radius: 20px; font-size: 16px; }
footer nav ul li a:hover { color: #fff; text-decoration: none; }
footer nav ul li.aktiv a { font-weight: 700; }

a.anfrage { border: 2px solid #c94b17; color: #c94b17; text-decoration: none; display: inline-block; padding: 4px 15px; margin: 0 5px; border-radius: 20px; }
a.anfrage:hover { color: #fff; text-decoration: none; }

.fade-in { opacity: 0; filter: blur(20px); transform: translateY(20px); animation: fadeIn 2s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; filter: blur(0px); transform: translateY(0); } }

@media only screen and (max-width: 959px) {
    body { font-size: 17px; }
    h1 { font-size: 36px; }
    main { margin-bottom: 200px; }
}
@media only screen and (max-width: 639px) {
    body { font-size: 16px; }
    h1 { font-size: 26px; }
    main { margin-bottom: 180px; }
    footer { padding: 10px 0; }
    footer nav ul li a { padding: 5px 8px; margin: 0 2px; border-radius: 20px; font-size: 14px; }
}