/* ------------------------------------------------------------------------- */
/* Anpassung und Animation mithilfe einer Bildmaske,
basierend auf Grantry Theme Helium */
/* ------------------------------------------------------------------------- */


/* Anpassen der Flucht links/rechts, Größenanpassungen und Positionierung Header */
/* ------------------------------ */
#g-header {
    padding-top: 0;
    padding-bottom: 0;
    background-image: none;
    background-color: transparent;
    height: calc(100vh - 0px);
    margin-top: -100px;
    z-index: 1;
  }

#g-header::before {
    background: none;
  }

#g-header .g-content {
    padding: 0;
    margin: 0;
}

#g-mainbar {
    padding-top: 0;
}

#g-mainbar .g-content {
    padding: 0;
    margin: 0;
}

#g-mainbar .platform-content.container {
    padding-left: 0;
    padding-right: 0;
}

/* Desktop*/
@media only all and (min-width: 48rem) and (max-width: 69.99rem) {
    #g-mainbar .platform-content.container .row {
        margin-left: -12px;
    }
    #g-mainbar .col {
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
}

/*Tablet*/
@media only all and (min-width: 30rem) and (max-width: 47.99rem) {
    #g-mainbar .col {
        padding-left: 0;
    }
}

/* Mobile */
@media only all and (min-width: 1rem) and (max-width: 29.99rem) {
    #g-mainbar .col {
        padding-left: 0;
    }
}


/* Anpassung des Bereichs "header_ueberschrift" (custom Einstellung in Quix - Section ID)*/
/* ------------------------------ */
#header_ueberschrift {
    margin-top: calc(-100vh + 0px); /* calc(-100vh + Menüzeilenhöhe) */
    min-height: calc(100vh - 0px); /* calc(100vh - Menüzeilenhöhe)*/
    z-index: 5;
}

/*  Animation */
/* ------------------------------ */
#g-header img {
  height: calc(100vh - 0px);
  width:100%;
  background-image: url("./h1.png");
  background-position: left center;
  background-size: cover;
}

.mask-container {
    position:relative;
  }
  
.color-image {
  position: absolute;
  inset: 0;

  background-image: url("./h2.png");
  background-position: left center;
  background-size: cover;

  -webkit-mask-image: url("./inkmask.png");
  mask-image: url("./inkmask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 4700% 100% !important; /*BREITE: Anzahl der Frames *100* - Höhe 100%*/
  mask-size: 4700% 100%; /*BREITE: Anzahl der Frames *100* - Höhe 100%*/
  }
  
  .color-image {
    animation: addColor 1500ms steps(32) forwards; /*Anzahl der Frame -1*/
    animation-delay: 2.5s;
  }
  
  @keyframes addColor {
    0% {
      -webkit-mask-position: 0% 100%;
      mask-position: 0% 100%;
    }
    100% {
      -webkit-mask-position: 100% 100%;
      mask-position: 100% 100%;
    }
  }