/* === Typo === */

@font-face {
  font-family: "Fedra Sans";
  src: url("../fonts/WF-038738-012280-000007.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000007.woff") format("woff");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Fedra Sans Book";
  src: url("../fonts/WF-038738-012280-000007.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000007.woff") format("woff");
}
@font-face {
  font-family: "Fedra Sans";
  src: url("../fonts/WF-038738-012280-000008.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000008.woff") format("woff");
  font-style: italic;
  font-weight: 500;
}
@font-face {
  font-family: "Fedra Sans Book Italic";
  src: url("../fonts/WF-038738-012280-000008.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000008.woff") format("woff");
}
@font-face {
  font-family: "Fedra Sans";
  src: url("../fonts/WF-038738-012280-000025.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000025.woff") format("woff");
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "Fedra Sans Bold";
  src: url("../fonts/WF-038738-012280-000025.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000025.woff") format("woff");
}
@font-face {
  font-family: "Fedra Sans";
  src: url("../fonts/WF-038738-012280-000026.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000026.woff") format("woff");
  font-style: italic;
  font-weight: 900;
}
@font-face {
  font-family: "Fedra Sans Bold Italic";
  src: url("../fonts/WF-038738-012280-000026.woff2") format("woff2"),
    url("../fonts/WF-038738-012280-000026.woff") format("woff");
}

body {
  font-family: "Fedra Sans Book", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Silbentrennung */
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Fedra Sans", sans-serif;
  font-weight: 900;
  color: var(--Rot);
}

h1,
.h1 {
  font-size: 40px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

h2,
.h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

h3,
.h3 {
  font-size: 23px;
  margin-bottom: 15px;
}

h4,
.h4 {
  font-size: 20px;
  font-weight: 700;
}

p {
  margin-bottom: 12px;
  font-family: "Fedra Sans Book", sans-serif;
  font-weight: 500;
}

p.lead {
  font-size: 20px;
  line-height: 1.2;
}

a {
  position: relative;
  text-decoration: none;
  -webkit-transition: var(--Transition);
  -o-transition: var(--Transition);
  transition: var(--Transition);
  color: var(--Rot);
}

a:hover {
  color: var(--DunkelRot);
  text-decoration: none;
}

i {
  color: #000;
}

p + h1,
p + .h1,
p + h2,
p + .h2 {
  margin-top: 35px;
}

p + h3,
p + .h3,
p + h4,
p + .h4 {
  margin-top: 20px;
}

/* Media Queries */

@media (min-width: 768px) {
  h1,
  .h1 {
    font-size: 50px;
  }

  h2,
  .h2 {
    font-size: 35px;
  }

  h3,
  .h3 {
    font-size: 25px;
  }

  h4,
  .h4 {
    font-size: 21px;
  }
  p.lead {
    font-size: 21px;
  }
}

@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: clamp(50px, 4.5vw, 60px);
    margin-bottom: 45px;
  }

  h2,
  .h2 {
    font-size: clamp(35px, 4vw, 50px);
    margin-bottom: 30px;
  }

  h3,
  .h3 {
    font-size: clamp(25px, 2.1vw, 30px);
    margin-bottom: 23px;
  }

  h4,
  .h4 {
    font-size: clamp(21px, 1.5vw, 25px);
    margin-bottom: 12px;
  }

  p {
    font-size: clamp(18px, 1vw, 21px);
    margin-bottom: 16px;
  }

  p.lead {
    font-size: clamp(23px, 1.5vw, 28px);
    margin-bottom: 18px;
  }
  p + h1,
  p + .h1,
  p + h2,
  p + .h2 {
    margin-top: 60px;
  }

  p + h3,
  p + .h3,
  p + h4,
  p + .h4 {
    margin-top: 30px;
  }
}