:root {
    --scale-value: 1.8;
}

    @media (max-width: 768px) {
    :root {
      --scale-value: 1.2;
  }
}

    #container {
      width:100%;
    }
    .animation-article {
    min-height:480px;
    width:100vw;
    /* background:purple; */
    overflow:visible;
  
    }
    .animation-box {
    	padding-top:0;
    	height:auto;
    	min-height:420px;
      display:flex;
    	width:100vw;

    }

    #svg-stage1 {
 /*     min-width: 800px;
      height:400px;
      width: 100vw; */
      overflow:visible;
      position:absolute;
      left:10px;
    }
    #svg-stage2 {
 /*   min-width: 800px;
      height:400px;
      width: 100vw;  */
      overflow:visible;
      position:absolute;
      right:20px;
    }
     #svg-stage3 {
 /*        min-width: 800px;
      height:300px;
      width: 100vw; */
      overflow:visible; 
      position:absolute;
      left:-40px;
    }
    @media screen and (max-width:500px) and (orientation:portrait) {
      .animation-box {
        min-height:300px;
      }
    #svg-stage3 {
      left:0px;
    }
    #svg-stage1 {
      left:-25px;
      margin-top:10px;
    }
    }
/*    @media screen and (max-width:799px) {
        #svg-stage1, #svg-stage2, #svg-stage3 {
        min-width:370px;
        max-width:799px;
        }	
    } */

   .move1 {
      position: absolute;
      top: 0;
      left: 0;
      width: 25px; /* oder deine gewünschte Breite */
      height: auto;
      z-index:0;
      opacity:0;
}
   .move2 {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px; /* oder deine gewünschte Breite */
      height: auto;
      transform:translate(0, -30px);
      z-index:2;
      opacity:0;
}
   .move3 {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px; /* oder deine gewünschte Breite */
      height: auto;
      z-index:1;
}
svg #svg-stage1 {
  width: 100%; /* Füllt die verfügbare Breite */
  height: auto; /* Höhe wird automatisch berechnet */
  aspect-ratio: 508/66; /* Verhältnis aus der viewBox: Breite/Höhe */
  display: block; /* Vermeidet ungewollte Abstände */
  z-index:0;
}
svg #svg-stage2  {
  width: 100%; /* Füllt die verfügbare Breite */
  height: auto; /* Höhe wird automatisch berechnet */
  aspect-ratio: 508/66; /* Verhältnis aus der viewBox: Breite/Höhe */
  display: block; /* Vermeidet ungewollte Abstände */
  z-index:2;
}
svg #svg-stage3  {
  width: 100%; /* Füllt die verfügbare Breite */
  height: auto; /* Höhe wird automatisch berechnet */
  aspect-ratio: 508/66; /* Verhältnis aus der viewBox: Breite/Höhe */
  display: block; /* Vermeidet ungewollte Abstände */
  z-index:1;
}
footer {
	position: relative;
    top: 10vh;
}


.person-container1 {
  position: relative;

}
.person-container2 {
  position: relative;

}
.person-container3 {
  position: relative;

}
.person-small {
  cursor: pointer;

  height: auto;
  position: relative;
  z-index: 2;
}

.person-large {
    position: fixed; /* Wichtig für absolute Positionierung im Viewport */
    height: 90vh;
    max-height:300px;
    width: auto;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: center center;
    pointer-events: none;
    z-index: 101;
    cursor: pointer;
}
@media screen and (max-width:1080px) {
  .person-large {
    width:auto;
    transform: translate(10px,0px);

  }
}
@media screen and (max-width:780px) {
  .person-large {
    min-width:90px;
    transform: translate(-20px,0px);

  }
}

 @media screen and (max-width:480px) {
  .person-large {
    width:auto;
    min-width:40px;
    transform: translate(-60px,-20px);

  }
}   
.invitation_to_click {
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index:2;
}
/*
.blink {
  animation: blink 1s steps(1, start) 15;
}

@keyframes blink {
  50% {
    visibility: hidden;
  }
}
}  
.blink {
  color: black;
  animation: blinkShadow 0.8s infinite;
}

@keyframes blinkShadow {
  50% {
    text-shadow: 1px 1px 5px black;
    color: green;
  }
}   */
.blink {
  color: var(--col3);
  animation: blinkShadow 0.8s steps(1, start) 15;
}

@keyframes blinkShadow {
  50% {
    text-shadow: 1px 1px 5px var(--col1);
    color: var(--col3);
  }
}