main img {

    display: block; 
    margin-left: auto;
    margin-right: auto;
    margin-block: 10px;
    height: auto;
}

.eighty{
    width: 80%
}
.wide{
    width: 70%
}

.sixty {
    width: 60%;
}
.smallwide{
    width: 50%;
}

.Square{
    width: 45%;
}

.narrow {
    width: 30%;
}

.twenty{
    width: 20%;
}

.fifteen{
    width: 15%;
}

.ten{
    width: 10%;
}

.five{
    width: 5%;
}


.hinweis-div{
    position: relative;
  margin: 20px 0 18px 25px;
  text-align: justify;
  border-left: 2px solid darkgray;
  width: auto;
  padding: 2px 10px;
  background-color: whitesmoke;
}
.hinweis-span{
     position: absolute;
    top: -25px;
    left: -30px;

    font-size: 50px;
    font-weight: bold;
    line-height: 1;

    padding: 1px 2px;
    color: darkgray;
    background: transparent;
    border-radius: 3px;
}



@media all and (max-width: 700px){
    .eighty, .wide, .smallwide, .Square, .narrow, .sixty{
        width: 90%;
    }

    .twenty{
        width: 45%;
    }
     .fifteen, .ten, .five{
        width: 30%;
    }
}