body {
  --nav-icon-height: clamp(50px, 5vw, 80px);
  --nav-icon-width: clamp(50px, 5vw, 80px);
  --nav-icon-padding-X: clamp(20px, 3vw, 41px);
  --nav-icon-padding-Y: clamp(20px, 3.5vw, 45px);
}

/** sizes,pad,marg **/

:root {
  --h1-font-size: clamp(
    28px,
    calc(28px + (50 - 28) * ((100vw - 375px) / (1920 - 375))),
    50px
  );
  --h2-font-size: clamp(
    15px,
    calc(15px + (18 - 15) * ((100vw - 375px) / (1920 - 375))),
    18px
  );
  --h3-font-size: clamp(
    19px,
    calc(19px + (30 - 19) * ((100vw - 375px) / (1920 - 375))),
    30px
  );
  --h4-font-size: 15px;

  --h5-font-size: clamp(
    17px,
    calc(17px + (20 - 17) * ((100vw - 375px) / (1920 - 375))),
    20px
  );
  --h6-font-size: clamp(
    14px,
    calc(14px + (15 - 14) * ((100vw - 375px) / (1920 - 375))),
    15px
  );

  --base-font-size: 15px;

  --btn-font-size: clamp(
    14px,
    calc(14px + (15 - 14) * ((100vw - 767px) / (1920 - 375))),
    15px
  );

  /**spacing*/
  --gap-s: clamp(5px, calc(3.79px + 0.32vw), 10px);
  --gap-m: clamp(10px, calc(0.17rem + 2.27vw), 30px);
  --gap-l: clamp(20px, calc(0.568rem + 3.41vw), 50px);
  --gap-xl: clamp(80px, calc(4.545rem + 2.27vw), 100px);
  --cont-gap: clamp(120px, calc(5.682rem + 9.09vw), 200px);

  /* border radius */
  --border-radius-10: 10px;

  /**colors**/
  --color-hintergrund: #f5f5f5;
  --color-shade-1: #e7e8e3;
  --color-shade-2: #dee5cf;
  --color-shade-3: #dbe5c3;
  --color-hellgruen: #cee1a5;
  --color-gruen: #96b853;
  --color-anthrazit: #282525;
  --color-braun: #6b605a;
  --color-weiss: #ffffff;
}

/** fonts **/

:root {
  --mainfont: "filson-pro";
  --headlinefont: "Arya";
}