/* Responsiveness----------------------------------------------------------------------------------- */

/* kleine Geräte (Smartphones) ----------------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .section:first-of-type .sectionheadline
{
  display:none;
}


.infografik{
  display: grid;
  grid-template-columns: 1fr;
}

.textblock{
  grid-row: initial;
}

.infografik .blobinfo{
  width:100%!important;
  transition: var(--transition);
  grid-column: 1;
  grid-row: 1;
  z-index:2;
}

.blobinfo:first-of-type, .blobinfo:nth-of-type(3){
margin-top:initial;
}

.infografik .blobinfo:first-of-type, .infografik:hover .blobinfo:first-of-type {
  animation: erscheinenmobile 15s linear infinite 0.5s;
  opacity:0;
}

.infografik .blobinfo:nth-of-type(2), .infografik:hover .blobinfo:nth-of-type(2)  {
  animation: erscheinenmobile 15s linear 5s infinite;
  opacity:0;
}

.infografik .blobinfo:nth-of-type(3), .infografik:hover .blobinfo:nth-of-type(3) {
  animation: erscheinenmobile 15s linear 10s infinite;
  opacity:0;
}


.blobcontainerouter{
  display:none;
}

.blobcontainer{
  background:url("images/Infografik_mobile.gif");
  background-size: cover;
  mix-blend-mode: normal;
  z-index:1;
}

}

@keyframes erscheinenmobile {
  0% {
opacity:1;  }
25%{
opacity:0;
  }
}

/* Tablets etc. ----------------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1200px) {.section:first-of-type .sectionheadline
  {
    display:none;
  }
  

  .infografik{
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .textblock{
    grid-row: initial;
  }
  
  .infografik .blobinfo{
    width:100%!important;
    transition: var(--transition);
    grid-column: 1;
    grid-row: 1;
    z-index:2;
  }
  
  .blobinfo:first-of-type, .blobinfo:nth-of-type(3){
  margin-top:initial;
  }
  
  .infografik .blobinfo:first-of-type, .infografik:hover .blobinfo:first-of-type {
    animation: erscheinenmobile 15s linear infinite 0.5s;
    opacity:0;
  }
  
  .infografik .blobinfo:nth-of-type(2), .infografik:hover .blobinfo:nth-of-type(2)  {
    animation: erscheinenmobile 15s linear 5s infinite;
    opacity:0;
  }
  
  .infografik .blobinfo:nth-of-type(3), .infografik:hover .blobinfo:nth-of-type(3) {
    animation: erscheinenmobile 15s linear 10s infinite;
    opacity:0;
  }
  
  .blobcontainerouter{
    display:none;
  }
  
  .blobcontainer{
    background:url("images/Infografik_mobile.gif");
    background-size: cover;
    mix-blend-mode: normal;
    z-index:1;
  }
  
  }
  
  @keyframes erscheinenmobile {
    0% {
  opacity:1;  }
  25%{
  opacity:0;
    }
  }
  
  @keyframes movemobile {
    0% {
      transform: translate(0%, 120%) scale(0.4);
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
  
    20% {
      transform: translate(-30%, 40%) scale(0.9);
      border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
    45% {
      transform: translate(0%, -40%) scale(0.7);
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
  
    70% {
      transform: translate(30%, 10%) scale(0.8);
      border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
  
    100% {
      transform: translate(0%, 120%) scale(0.6);
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
  }