header{
    background-color: rgb(45, 45, 45);
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center; 
    align-items: center;
    border-radius: 15px;
    box-shadow: 8px 6px 16px -3px rgba(0,0,0,0.63);
    text-shadow: 8px 6px 16px -3px rgba(0,0,0,0.63);
    position: sticky;
    top: 10px;
    left: 0;
    overflow: hidden;
    

}
.headtext{
    color: rgb(173, 173, 173);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-right:2.5em;
    text-shadow: 4px 8px 12px rgba(0,0,0,0.64);
    text-decoration: none;
    
}

.headtext:hover{
    
    text-shadow: 4px 17px 7px rgba(0,0,0,0.64);
    transform:translateY(-3px);
    transition:all 0.3s;
    color: white;
    
}

html{
    background-color:rgb(30, 30, 30);
    scroll-behavior: smooth;
    scroll-padding: 107px;
    
}
.infotext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.55em;
    display:flex;
    text-align: center;
    justify-content: center;
}
#clickable1{
   text-decoration:underline;
   text-decoration-color:rgba(245, 245, 245, 0.267) ;
   
}
#clickable1:hover{
    text-decoration: none;
    color:blueviolet;
    transition:all .5s;
  
}
#pfp{
    box-shadow: 9px 7px 19px 2px rgba(0,0,0,0.55);
    border-radius: 1.61em;
    z-index: -1;
    position: relative;
}
.kompetenzentext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.55em;
    display:flex;
    text-align: center;
    justify-content: center;
    
}


#überschrift1{
    font-size: 2em;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   
}
#überschrift1:hover{
transform: translateY(-3px);
color:blueviolet;
transition:all .3s;
}
#überschrift1:active{
transform: translateY(3px);

}
#überschrift2:hover{
    transform: translateY(-3px);
    color:blueviolet;
    transition:all .3s;
    }
    #überschrift2:active{
    transform: translateY(3px);
    
}
#überschrift3:hover{
    transform: translateY(-3px);
    color:blueviolet;
    transition:all .3s;
 }
    #überschrift3:active{
    transform: translateY(3px);
        
}
 #überschrift4:hover{
     transform: translateY(-3px);
     color:blueviolet;
     transition:all .3s;
     }
     #überschrift4:active{
     transform: translateY(3px);
            
}
#überschrift5:hover{
    transform: translateY(-3px);
    color:blueviolet;
    transition:all .3s;
    }
    #überschrift4:active{
    transform: translateY(3px);
           
}
#überschrift2{
    font-size: 2em;
    color: white;
}
#überschrift3{
    font-size: 2em;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
#überschrift4{
    font-size: 2em;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.berufserfahrung{
    color: whitesmoke;
    font-size: 1.5em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sprache1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5em;
    color: white;
   text-decoration: underline;
}
.sprache1-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5em;
    color: white;
   text-decoration: underline;
   position: relative;
  
}

.sprache2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
}
.sprache2-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
    position: relative;

}
.sprache3{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
}
.sprache3-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
    position: relative;
}
.berufstext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.55em;
    display:flex;
    text-align: center;
    justify-content: center;
}
.bewerbungstext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.55em;
    display:flex;
    text-align: center;
    justify-content: center;
    text-decoration: none;
}
.beruf1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5em;
    color: whitesmoke;
    
}
.beruf4{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.5em;
    color: whitesmoke;
    position: relative;
}
.beruf5{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
    text-decoration: underline;
    position: relative;
}
.beruf2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.3em;
    color: whitesmoke;
   text-decoration: underline;
   
}
.beruf2-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.3em;
    color: whitesmoke;
   text-decoration: underline;
}
.beruf3{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
}
.positioning1{
    position: absolute;
    left: 2em;
}
.berufstext2{
    float: right;
    left:10em ;
    
}
.sprachentext2{
position:relative;
left: 20em;

}
.beruf2-2:hover{
    color: blueviolet;
    transition:all .3s;
}
.beruf3-2{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: whitesmoke;
    text-decoration: none;
    text-decoration:underline;
    text-decoration-color:rgba(245, 245, 245, 0.267) ;
}
.beruf3-2:hover{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: blueviolet;
    transition: all .3s;
}
.beruf3-3{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: white;
    text-decoration: none;
    text-decoration:underline;
    text-decoration-color:rgba(245, 245, 245, 0.267) ;
}
.beruf3-3:hover{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: blueviolet;
    transition: all .3s;
}
.beruf3-4{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: white;
    text-decoration: none;
    text-decoration:underline;
    text-decoration-color:rgba(245, 245, 245, 0.267) ;
}
.beruf3-4:hover{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.25em;
    color: blueviolet;
    transition: all .3s;
}
.sprachentext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1.55em;
    display:flex;
    text-align: center;
    justify-content: center;

}
#überschrift5{
    font-size: 2em;
    color: white;
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.passwordtext{
    color: whitesmoke;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}
#button{
border-radius: 8px;
box-shadow: 5px 5px 14px -1px rgba(0,0,0,0.35);
}

#button:hover{
transform: translateY(-2px);
transition: all .2s;

}
#button:active{
    transform: translateY(2px);
    transition: all .2s;
    box-shadow: inset 5px 5px 14px -1px rgba(0,0,0,0.69);

}
#password{
border-radius: 8px;
}

.login{

    outline-color: white;
}
@media (max-width: 768px) {
    header {
        height: auto;
        flex-direction: column;
        padding: 20px;
    }

    .headtext {
        font-size: 1.5em;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .infotext, .kompetenzentext, .bewerbungstext {
        font-size: 1.2em;
    }

    #überschrift1, #überschrift2, #überschrift3, #überschrift4, #überschrift5 {
        font-size: 1.8em;
        text-align: center;
        margin-bottom: 15px;
    }

    #button {
        width: 100%;
        padding: 12px;
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .headtext {
        font-size: 1.2em;
    }

    .infotext, .kompetenzentext, .bewerbungstext {
        font-size: 1em;
    }

    #button {
        font-size: 1em;
    }
}