#hero *{
    display: inline-block;
}

/* Gilt bis 1500px Breite */
@media only screen and (max-width: 1300px) {
    #hero{
        background-image: url('../assets/hero_aboutMe.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-left:10%;
        height: 45vw;
        position: relative;
    }

    #hero_headline *{
        color: white;
        display: inline-block;
        margin-bottom: 5%;
        margin-top: 1vw;
        font-Size: 4vw;
        position: relative;
        
    }

    #hero_headline_first{
        font-size: 5vw;
        margin-right: 1vw;
        font-weight: bold;
    }

    #hero_headline_second{
        font-size: 3vw;
    }

    #hero_text{
        color: white;
        padding-left: 8%;
        position: relative;
        font-size: 2.5vw;
        width: 50vw;
    }

    #hero_profile{
        height:40vw;
        margin-bottom: 0px;
        vertical-align: top;
        position: absolute;
        top: 5vw;
        right: 12vw;
    }

    #normal_text{
        position: absolute;
        display: none;
    }

    #mobil_text{
        position: relative;
        display: block;
    }

    .aboutMeText{
        width: 80vw;
        margin-inline: 10vw;
        text-align: center;
    }

    .headline{
        text-align:center;
        margin-block: 4vw;
    }

    #skills .headline{
        margin-top: 10vw;
    }

    #freizeit img,  #werdegang img{
        width: 35vw;
        margin-inline: 32.5vw;
        margin-bottom: 3vw;
    }

    #freizeit .aboutMeText{
        margin-bottom: 20vw;
    }

    #skill_wrapper{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(5, auto);
      gap: 12px;              /* Abstand zwischen Bildern */
      width: 80vw;
      margin-inline:10vw;
      margin-block: 10vw;
      place-items: center;
    }

    #s1 { grid-column: 1 / 2; grid-row: 1 / 2; }
    #s2 { grid-column: 2 / 3; grid-row: 2 / 3; }
    #s3 { grid-column: 1 / 2; grid-row: 3 / 4; }
    #s4 { grid-column: 2 / 3; grid-row: 4 / 5; }
    #s5 { grid-column: 1 / 2; grid-row: 5 / 6; }

    #s1,#s2,#s3,#s4,#s5{
        width:30vw;
    }
}

/* Gilt ab 1501px Breite */
@media only screen and (min-width: 1301px) {
    #hero{
        background-image: url('../assets/hero_aboutMe.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding-left:12%;
        height: 25vw;
        position: relative;
    }

    #hero_headline *{
        color: white;
        display: inline-block;
        margin-bottom: 10%;
        margin-top: 20%;
        font-Size: 30px;
        position: relative;     
    }

    #hero_headline_first{
        font-size: 2.5vw; 
        font-weight: bold;
        margin-right: 20px;
    }

    #hero_headline_second{
        font-size: 1.5vw;
    }

    #hero_text{
        color: white;
        padding-left: 3%;
        position: relative;
        font-size: 1vw;
        width: 30vw;
    }

    #hero_profile{
        height:20vw;
        margin-bottom: 0px;
        vertical-align: top;
        position: absolute;
        top: 5vw;
        right: 30vw;
    }

    .aboutMeText{
        width: 45vw;
    }

    .text_wrapper{
        display: flex;
        align-items: center;
        margin-inline: 20vw; 
        width: 60vw;
    }

        #normal_text{
        position: relative;
        display: flex;
    }

    #mobil_text{
        position: absolute;
        display: none;
    }

    .headline{
        margin-left: 11em;
        font-size: 30px;
        margin-bottom: 1em;
    }

    section{
        margin-bottom: 8vw;
    }

    #werdegang img{
        width: 15vw;
        margin-left: 5em;
    }

    #freizeit img{
        width: 15vw;
        margin-right: 5em;
    }

    #freizeitText{
        text-align: right;
    }

    #skill_wrapper{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 12px;              /* Abstand zwischen Bildern */
      width: 60%;
      margin-inline:20%;
      margin-top: 5em;
    }

    #s1 { grid-column: 1 / 2; grid-row: 1 / 2; }
    #s2 { grid-column: 3 / 4; grid-row: 1 / 2; }
    #s3 { grid-column: 2 / 3; grid-row: 2 / 3; }
    #s4 { grid-column: 1 / 2; grid-row: 3 / 4; }
    #s5 { grid-column: 3 / 4; grid-row: 3 / 4; }

    #s1,#s2,#s3,#s4,#s5{
        width:15vw;
    }
}