/* ------------------------------------------------------------- 08/02/2023 - *
  HTML
  ----  
  siehe auch: cssportal.com/css-loader-generator/
  
  <div class="pageloader">
    <div>
      <div class="pageloader-body">
        <div class="cssload-loader">
          <div class="cssload-inner cssload-1"></div>
          <div class="cssload-inner cssload-2"></div>
          <div class="cssload-inner cssload-3"></div>
        </div>
      </div>
    </div>
  </div>
  <script>
  $(document).ready(function() {
    setTimeout(function() { $('body').addClass('page-is-loaded');	}, 500);
  }); // jQuery
</script>	
 * -------------------------------------------------------------------------- */
.pageloader {  
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  float: left;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 20px;
  z-index: 999; /* 1. höchster z-index auf Site */
//background-color: var(--pageloader-back);
  background-color: var(--back-hex, 255,255,255);
  transition: 0.3s all ease;
}

.pageloader .pageloader-body { text-align: center; }
.pageloader .cssload-loader {
  position: relative;
  left: calc(50% - 31px);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  perspective: 780px;
}

.pageloader .cssload-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
}

.pageloader .cssload-inner.cssload-1 {
  left: 0;
  top: 0;
  animation: cssload-rotate-1 1.15s linear infinite;
  border-bottom: 3px solid var(--text-hex, 0,0,0);
}

.pageloader .cssload-inner.cssload-2 {
  right: 0;
  top: 0;
  animation: cssload-rotate-2 1.15s linear infinite;
  border-right: 3px solid var(--text-hex, 0,0,0);
}

.pageloader .cssload-inner.cssload-3 {
  right: 0;
  bottom: 0;
  animation: cssload-rotate-3 1.15s linear infinite;
  border-top: 3px solid var(--text-hex, 0,0,0);
}

body.page-is-loaded .pageloader {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

@keyframes cssload-rotate-1 { 0% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } }
@keyframes cssload-rotate-2 { 0% { -webkit-transform: rotateX(50deg) rotateY( 10deg) rotateZ(0deg); transform: rotateX(50deg) rotateY( 10deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(50deg) rotateY( 10deg) rotateZ(360deg); transform: rotateX(50deg) rotateY( 10deg) rotateZ(360deg); } }
@keyframes cssload-rotate-3 { 0% { -webkit-transform: rotateX(35deg) rotateY( 55deg) rotateZ(0deg); transform: rotateX(35deg) rotateY( 55deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(35deg) rotateY( 55deg) rotateZ(360deg); transform: rotateX(35deg) rotateY( 55deg) rotateZ(360deg); } }