:root {
  /* color */
  --main-color: #035b91;
  --second-color: #08083d;
  --lightgray-color: #f5f5f5;
  --gray-color: #ccc;
  --darkergray-color: #999;
  --font-color: #262626;

  /* swiper */
  --swiper-theme-color: var(--main-color);
  --swiper-navigation-size: 20px;

  /* basics */
  --grid-gap: 30px;
  --container-size: 1125px;
  --width-tablet: 1000px;
  --width-smartphone: 800px;
  --transition-duration: 0.3s;

  /* header */

  /* header scrolling? */

  --header-position: sticky; /* sticky = header scrollt; alternativ setze: relative */

  --nav-breakpoint: 1101;
  --nav-color: var(--font-color);
  --nav-active-color: var(--main-color);
  --nav-font-size: var(--body-font-size);
  --nav-font-weight: 300;

  --nav-mobile-active-color: var(--main-color);
  --nav-burger-line-color: var(--main-color);
  --skip-focus-border-color: var(--main-color);

  /* border radius */

  --border-radius-xs: 5px;
  --border-radius-s: 10px;
  --border-radius-m: 20px;
  --border-radius-l: 30px;
  --border-radius-xl: 100%;

  /* font */

  --body-font-family: "IBM Plex Sans", sans-serif;
  --body-font-size: 1.125em;
  --body-hyphens: auto;
  --h1-size: 2.4rem;
  --h1-color: var (--font-color);
  --h2-size: 2.4rem;
  --h2-color: --font-color;
  --h3-size: 1.5rem;
  --h3-color: --font-color;
  --h4-size: 1.25rem;
  --h4-color: --font-color;
  --h5-size: 1.1rem;
  --h5-color: --font-color;
  --h6-size: 1rem;
  --h6-color: --font-color;
  --hl-hyphens: none;
  --nav-font-size: calc(var(--body-font-size) * 0.9);
}