html {
  --blau-100: #11316e;
  --blau-70: #586f9a;
  --blau-50: #8898b7;
  --blau-30: #b8c1d4;
  --blau-20: #cfd5e1;
  --blau-10: #e7eaf1;
  --blau-5: #f3f5f8;

  --hellblau-100: #00addf;
  --hellblau-70: #4dc6e9;
  --hellblau-30: #b3e6f5;
  --hellblau-20: #cceff9;
  --hellblau-10: #e6f7fc;

  --türkis-100: #05bfc4;
  --türkis-70: #50d2d6;
  --türkis-30: #b4eced;
  --türkis-20: #cdf2f3;
  --türkis-10: #e6f9f9;

  --dark-blue: #001f41;
  --green: #71af2d;
  --yellow: #fbb800;
  --yellow-40: #FDE399;
  --orange: #ef7917;
  --red: #d70825;

  --color: var(--blau-100);

  --h1-size: 48px;
  --h1-height: 52px;

  --navbar-height: 96px;

  --content-width: 1176px;
  --content-padding: calc(50vw - var(--content-width) / 2);
  --pdf-padding: 64px;

  --icon-small-container: 96px;
  --icon-small-borderradius: 48px;
  --icon-small-padding: 24px;
  --icon-small-size: 48px;

  --slide-speed: 500ms;
}

@media (max-width: 1439px) {
  html {
    --navbar-height: 72px;

    --content-width: 832px;
    --pdf-padding: 32px;
  }
}

@media (max-width: 1023px) {
  html {
    --content-width: 624px;

    --icon-small-container: 72px;
    --icon-small-borderradius: 36px;
    --icon-small-padding: 16px;
    --icon-small-size: 40px;
  }
}

@media (max-width: 767px) {
  html {
    --h1-size: 32px;
    --h1-height: 35px;

    --content-width: 327px;
    --content-padding: 24px;
    --pdf-padding: 24px;
  }
}