/** FONTS LADEN **/

/* zalando-sans-expanded */
@font-face {
  font-display: swap;
  font-family: "Zalando Sans Expanded";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/zalando-sans-expanded-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Zalando Sans Expanded";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/zalando-sans-expanded-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Zalando Sans Expanded";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/zalando-sans-expanded-900.woff2") format("woff2");
}

/* zalando-sans-semiexpanded */
@font-face {
  font-display: swap;
  font-family: "Zalando Sans SemiExpanded";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/zalando-sans-semiexpanded-400.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Zalando Sans SemiExpanded";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/zalando-sans-semiexpanded-500.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Zalando Sans SemiExpanded";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/zalando-sans-semiexpanded-700.woff2") format("woff2");
}

/** VARIABLEN **/
:root {
  /* font */
  --mainfont: "Zalando Sans SemiExpanded";
  --headlinefont: "Zalando Sans Expanded";

  --base-font-size: clamp(
    16px,
    calc(16px + (19 - 16) * ((100vw - 375px) / (1920 - 375))),
    19px
  );

  --color-hell-grau: #ebebeb;
  --color-anthrazit: #222220;
  --color-green: #00943e;

  --border-radius: 5px;
  --h4-font-size: clamp(
    18px,
    calc(18px + (22 - 18) * ((100vw - 375px) / (1920 - 375))),
    22px
  );

  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(20px, 5.33vw, 30px);
  --gap-l: clamp(40px, 9.33vw, 80px);
  --gap-xl: clamp(50px, 20vw, 100px);
  --cont-gap: clamp(100px, 10vw, 200px);
}

/** FONTS ZUWEISEN ***/

html,
body {
  font-size: var(--base-font-size) !important;
  font-family: var(--mainfont) !important;
}

body {
  background-color: var(--color-hell-grau);
  color: var(--color-anthrazit);
}

h1 {
  font-family: var(--headlinefont) !important;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 0 !important;
  font-size: clamp(
    23px,
    calc(23px + (42 - 23) * ((100vw - 375px) / (1920 - 375))),
    42px
  );
}

h2 {
  font-family: var(--mainfont) !important;
  font-weight: 500;
  font-size: clamp(
    18px,
    calc(18px + (26 - 18) * ((100vw - 375px) / (1920 - 375))),
    26px
  );
  background-color: #fff;
  padding: 0.5em;
  border-radius: var(--border-radius);
  width: fit-content;
  margin-top: 0;
  line-height: 1.222em;
}

h3 {
  font-family: var(--headlinefont) !important;
  font-weight: 900;
  font-size: clamp(
    18px,
    calc(18px + (28 - 18) * ((100vw - 375px) / (1920 - 375))),
    28px
  );
  margin-top: 0;
  text-transform: uppercase;
}

h4 {
  font-family: var(--headlinefont) !important;
  font-weight: 900;
  font-size: var(--h4-font-size);
  margin-top: 0;
  text-transform: uppercase;
}

h5 {
  font-family: var(--mainfont) !important;
  font-weight: 700;
  font-size: clamp(
    18px,
    calc(18px + (20 - 18) * ((100vw - 375px) / (1920 - 375))),
    20px
  );
  margin-top: 0;
}

p,
li {
  font-family: var(--mainfont) !important;
  font-weight: 400;
  font-size: var(--base-font-size);
  line-height: 1.737em;
}