/*Adobe Proxima Nova*/
/*@import url("https://use.typekit.net/zvj4etr.css");*/



/*
[data-aos="fade-out"] {
    opacity: 1;
    transition-property: opacity;
  }
  [data-aos="fade-out"].aos-animate {
  opacity:0
    }
  
  

[data-aos="example-anim2"] {
    transition-property: background;
  }
  [data-aos="example-anim2"].aos-animate {
  background:burlywood
    }*/

  


body {
    hyphens: auto;
}


.content-container {
    position: relative;
    height: 100%;
    background-color: white;
    color:#0c0c0c;
    position: relative;
    z-index: 1;
    margin-top: 100vh;
    width: 100%;
    overflow: hidden;
}

/*
em{
    font-style: normal;
    color: palevioletred;
    font-family: "";
}*/
/*
.wrapboxcentered {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}*/


.box-1 {
    width: 100%;
    min-height: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 8rem;
    z-index: 1;
    position: relative;
    padding-top: 10rem;
    padding-left: 6rem;
    padding-right: 6rem;
    margin-bottom: 7rem;
}


/*Textmarker-Effekt*//*Vorsicht greift auch Hamburgerbutton an*/
.about-me span, .kompetenzen span, .box-3 span {
    background: linear-gradient(120deg, #e5ff1e 0%, #e5ff1e 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 90%
}


.about-me {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    hyphens: none;
    padding-bottom: 5rem;
    padding-top: 2rem;
}

.about-me-text-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    margin-top: 1.5rem;
    grid-row: 2;
}

.about-me-text-2 {
    grid-column-start: 3;
    grid-column-end: 5;
    margin-top: 1.5rem;
    grid-row: 2;
}

.about-me-text-3 {
    grid-column-start: 3;
    grid-column-end: 5;
    margin-top: 1.5rem;
    grid-row: 2;
}



h1 {
    font-family: "Outfit-Variable";
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
    line-height: 2.4rem;
    padding-bottom: 1.5rem;
}



h2 {
    font-family: 'Outfit-Variable';
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
}



h3 {
    font-family: 'Outfit-Variable';
    font-weight: 700;
    font-size: 1.2rem;
    /*letter-spacing: 0.22rem;*/
    letter-spacing: 0.19rem;
    text-transform: uppercase;
    font-style: normal;
}


h4 {
    font-family: 'Outfit-Variable';
    font-weight: 100;
    font-size: 5rem;
    letter-spacing: 0.17rem;
    text-transform: uppercase;
    line-height: 4.5rem;
    margin-bottom: 1.5rem;
}



p {
    font-family: 'Outfit-Variable';
    font-weight: 300;
    font-size: 1.02rem;
    letter-spacing: 0.03rem;
    line-height: 1.7rem;
    /*font-optical-sizing: auto;*/
}



img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.profil-image {
    grid-column-start: 3;
    grid-column-end: 5;
    filter: grayscale(100%);
    grid-row: 1;
    height: fit-content;
}

.profil-image:hover {
    filter: grayscale(0%);
}


.box-2 {
    width: 100%;
    min-height: fit-content;
    display: grid;
    z-index: 1;
    position: relative;
    padding-left: 6rem;
    padding-right: 6rem;
    flex-direction: column;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 8rem;
    margin-bottom: 7rem;

}


.kompetenzen {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-bottom: 2rem;
}


.kompetenzen-text-1 {
    grid-column-start: 3;
    grid-column-end: 5;
    padding-bottom: 0;
    margin-bottom: 5rem;
}

.kompetenzen-text-2 {
    grid-column-start: 4;
    grid-column-end: 5;
    margin-bottom: 10rem;
}




.begriffe-spalte-1 {
    grid-column-start: 3;
    grid-column-end: 4;
    display: flex;
    flex-direction: column;
    margin-top: 4.5rem;
}

.begriffe-spalte-2 {
    grid-column-start: 4;
    grid-column-end: 5;
    display: flex;
    flex-direction: column;
    margin-top: 4.5rem;
}

hr {
    border: 0;
    height: 0.095rem;
    background-color: #0c0c0c;
    margin-bottom: 1rem;
    margin-top: 0.2rem;
}

ul {
    padding-top: 0rem;
}

.begriff-1>ul>li,
.begriff-2>ul>li,
.begriff-3>ul>li,
.begriff-4>ul>li,
.begriff-5>ul>li,
.begriff-6>ul>li {

    font-family: "Outfit-Variable";
    list-style-type: none;
    line-height: 1.7rem;
    letter-spacing: 0.03rem;
    font-size: 1.02rem;
    font-weight: 300;


}

li>b {
    font-weight: 700;
}


.begriff-1,
.begriff-2,
.begriff-3,
.begriff-4,
.begriff-5,
.begriff-6 {
    margin-bottom: 3rem;
    /*padding-right: 4rem;*/
}




.box-3 {
    width: 100%;
    min-height: fit-content;
    display: grid;
    z-index: 1;
    position: relative;
    background-color: white;
    display: grid;
    flex-direction: column;
    padding-left: 6rem;
    padding-right: 6rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 8rem;
    padding-bottom: 15rem;

}




.teasertext-button {
    grid-column-start: 1;
    grid-column-end: 3;
    padding-bottom: 2rem;
}



.button a {
    font-family: 'Outfit-Variable';
    text-transform: uppercase;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.18rem;
    font-size: 1.2rem;
    color: white;
     padding: 1rem 1.5rem 1rem 1.5rem;
    width: fit-content;
    height: fit-content;
    border-radius: 2rem;
    background-color: #0c0c0c;
    transition: 1s ease;
}

.button-container {
    grid-column-start: 3;
    grid-column-end: 5;
    margin-top: 5rem;
    
}



.button a:hover {
    cursor: pointer;
    /*background-color: #837D59;*/
    background-color: #e9e6e1;
    color: #0c0c0c;
}



.pfeil {
    grid-column-start: 2;
    grid-column-end: 3;
    font-size: 4.5rem;
    font-weight: 100;
    text-align: right;
    line-height: 4rem;
    margin-top: 5rem;
}












/*

/*Soft Skills

.box2 {

    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    z-index: 1;
    position: relative;
    background-color: #e9e6e1;
    color: black;
    padding-top: 10rem;
    padding-bottom: 10rem;
    flex-direction: row;
    height: fit-content;
    
}

.bigdisplay2 h1 {
  
    font-weight: 600;
    text-transform: uppercase;
    /*font-style: italic;
    padding-bottom: 1rem;
    font-size: 5rem;
    line-height: 4.2rem;
    grid-column-start: 1;
    grid-column-end: 11;
    padding-bottom: 4rem;
}


.softskills-title{
    margin-top: 0rem;
    grid-column-start:1;
    grid-column-end:3;
    grid-row: 2;
    text-align: end;
    margin-left: -5rem;
   
}

.soft-skills{
    margin-top: 5rem;
    margin-bottom: 8rem;
    display: flex;
    flex-direction: row;  
    flex-wrap: wrap; 
    justify-content: space-between;
    margin-left: 0rem;
    
}

.bigdisplay2 h1 >em{
    font-weight: 100;
    font-size: 5rem;
    font-style: normal;
    line-height: 4.2rem;
    text-transform: uppercase;
}

.soft-skill-wrap{
    display: flex;
    flex-direction: row;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 11;
    flex-wrap: wrap;
    justify-content: space-between;
  
}
.bigdisplay2{
    display: flex;
    flex-direction:column;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 11;
    padding-left: 5rem;
    padding-right: 5rem;
}

.softskill-1 img, .softskill-2 img, .softskill-3 img{
   object-fit:contain;
   width: 16rem;
   height: 8rem;
  
}

.softskill-1 , .softskill-2 {
    
    margin-right: 3rem;
    margin-top: 7rem;
 }

 .softskill-3 {
    
    margin-right: 0rem;
    margin-top: 7rem;
 }


.softskill-1 h1, .softskill-2 h1, .softskill-3 h1{
   padding-top:1.5rem;
   font-size: 1rem;
   
}

.zahl h1{
   font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    padding-top: 1.2rem;
    font-family: 'proxima-nova';
 }


 .zahl p{
    font-size: 3.2rem;
     font-weight: 500;
     text-transform: uppercase;
     margin-top: 2rem;
    text-transform: uppercase;
    /*font-style: italic;
  
  }

 



.softskills-title hr, .zahl hr{
    border: 0;
    height: 0.17rem;
    background-color: black; 
    margin-top: -0.3rem;  
}



.softskills-title h1, .softskills h1{
    margin-top: -0.45rem;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.15rem;
    padding-bottom: 0.2rem;
   
}*/

/*
[data-aos="example-anim2"] {
    background: red;
    transition-property: background;

    &.aos-animate {
        background: green;
    }
}*/



/*Große Bildschirme*/

@media screen and (min-width: 2000px) {
    .box-1 {
        width: min(100%, 125rem);
        margin-inline-start: auto;
        margin-inline-end: auto;
    }

    .box-2 {
        width: min(100%, 125rem);
        margin-inline-start: auto;
        margin-inline-end: auto;
    }

    .box-3 {
        width: min(100%, 125rem);
        margin-inline-start: auto;
        margin-inline-end: auto;
    }


    .footercontent {
        padding-left: 6rem;
        padding-right: 6rem;
        width: min(100%, 125rem);
        margin-inline-start: auto;
        margin-inline-end: auto;
    }


}





/*Tablet*/

@media screen and (min-width:750px) and (max-width:1200px) {




    .box-1 {
        padding-top: 7rem;
        padding-left: 5rem;
        padding-right: 5rem;
        grid-column-gap: 2.5rem;
        margin-bottom: 5rem;
    }






    .about-me {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;
    }

    .about-me-text-1 {
        grid-column-start: 1;
        grid-column-end: 2;
        margin-top: 2.5rem;
        grid-row: 3;
    }

    .about-me-text-2 {
        grid-column-start: 1;
        grid-column-end: 5;
        margin-top: 1rem;
        grid-row: 4;
    }

    .about-me-text-3 {
        grid-column-start: 3;
        grid-column-end: 5;
        margin-top: 1.5rem;
        grid-row: 2;
    }




    img {
        object-fit: cover;
        width: 100%;
        height: 50%;
    }

    .profil-image {
        grid-column-start: 1;
        grid-column-end: 5;
        height: fit-content;
        filter: grayscale(100%);
        grid-row: 2;

    }



    .box-2 {

        padding-top: 3rem;
        padding-left: 5rem;
        padding-right: 5rem;
        grid-column-gap: 2.5rem;
        padding-bottom: 2rem;
    }




    .kompetenzen {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;

    }

    .kompetenzen-text-1 {
        grid-column-start: 1;
        grid-column-end: 5;
        padding-bottom: 0;
        margin-bottom: 5rem;
        grid-row: 2;
        margin-top: 1rem;
    }

    .kompetenzen-text-2 {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row: 3;
        margin-bottom: 10rem;
    }




    .begriffe-spalte-1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 3;
        display: flex;
        flex-direction: column;

    }

    .begriffe-spalte-2 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row: 3;
        display: flex;
        flex-direction: column;
       
    }

    hr {
        border: 0;
        height: 0.095rem;
        background-color: #0c0c0c;
        margin-bottom: 1rem;
        margin-top: 0.2rem;
    }

    ul {

        padding-top: 0rem;
    }


    /*
    .begriff-1>ul>li,
    .begriff-2>ul>li,
    .begriff-3>ul>li,
    .begriff-4>ul>li,
    .begriff-5>ul>li,
    .begriff-6>ul>li {
        list-style-type: none;
        line-height: 1.6rem;
        letter-spacing: 0.03rem;
        font-size: 1rem;
        font-weight: 400;
    }*/



    li>b {
        font-weight: 700;
    }


    .begriff-1,
    .begriff-2,
    .begriff-3,
    .begriff-4,
    .begriff-5,
    .begriff-6 {
        margin-bottom: 3rem;
        /*margin-right: 4rem;*/
        margin-right: 3rem;
    }



    .box-3 {
        padding-top: 3rem;
        padding-left: 5rem;
        padding-right: 5rem;
        grid-column-gap: 2.5rem;
    }





    .teasertext-button {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;

    }

    .button-container {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 5;
    }

    .button:hover {
        cursor: pointer;
    }



    .pfeil {
        grid-column-start: 2;
        grid-column-end: 3;
        font-size: 4.5rem;
        font-weight: 100;
        text-align: right;
        line-height: 4rem;
        margin-top: 5rem;
    }



}


/*Handy*/

@media screen and (max-width: 750px) {




    .box-1 {
       
        padding-top: 2.5rem;
        padding-left: 5%;
        padding-right: 5%;
        flex-direction: column;    
        grid-column-gap: 2.5rem;
    }


   



    /*
    h1 {
        font-size: 3rem;
        line-height: 2.5rem;
        margin-bottom: 0.5rem;
    }*/


    p {
        font-size: 1rem;
        line-height: 1.4rem;
    }


    .about-me {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    /*
    .about-me-title {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;

    }*/
    /*
    .about-me-text-1 {
        grid-column-start: 1;
        grid-column-end: 5;
        margin-top: 1.5rem;
        grid-row: 3;
    }*/

    .about-me-text-2 {
        grid-column-start: 1;
        grid-column-end: 5;
        margin-top: 1rem;
        grid-row: 4;
    }








    img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    .profil-image {
        grid-column-start: 1;
        grid-column-end: 5;
        filter: grayscale(100%);
        grid-row: 2;

    }

    .profil-image:hover {
        filter: grayscale(0%);

    }


    .box-2 {
        padding-top: 0rem;
        padding-left: 5%;
        padding-right: 5%;
        grid-column-gap: 0rem;
        padding-bottom: 0rem;
    }




    .kompetenzen {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;
        padding-bottom: 5rem;
    }

    .kompetenzen-text-1 {
        grid-column-start: 1;
        grid-column-end: 5;
        padding-top: 0.8rem;
        margin-bottom: 2.5rem;
        grid-row: 2;
    }



    .begriffe-spalte-1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row: 3;
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    .begriffe-spalte-2 {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row: 3;
        margin-top: 6rem;
        display: flex;
        flex-direction: column;
    }

    hr {
        border: 0;
        height: 0.095rem;
        background-color: #0c0c0c;
        margin-bottom: 0.7rem;
        margin-top: 0.2rem;

    }

    ul {

        padding-top: 0rem;
    }

    
    .begriff-1>ul>li,
    .begriff-2>ul>li,
    .begriff-3>ul>li,
    .begriff-4>ul>li,
    .begriff-5>ul>li,
    .begriff-6>ul>li {

        /*list-style-type: none;*/
        line-height: 1.4rem;
        /*letter-spacing: 0.03rem;*/
        font-size: 1rem;
        /*font-weight: 400;*/


    }

    li>b {
        font-weight: 700;

    }


    .begriff-1,
    .begriff-2,
    .begriff-3,
    .begriff-4,
    .begriff-5 {
        margin-bottom: 8rem;

    }


    .begriff-1,
    .begriff-2,
    .begriff-3,
    .begriff-4,
    .begriff-5,
    .begriff-6 {

        margin-right: 0rem;
    }

    /*
    .button a {

        text-transform: uppercase;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.19rem;
        font-size: 1.2rem;
        color: white;

    }*/



    .box-3 {
        padding-top: 0rem;
        padding-left: 5%;
        padding-right: 5%;
        grid-column-gap: 0rem;
        padding-bottom: 11.5rem;
    }


    .teasertext-button {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 1;
        padding-bottom: 5rem;
    }

    .button-container {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row: 4;
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        justify-content: start;
    }





}