@font-face{
    font-family:"Artifakt Element";
    font-display:swap;
    src:url('../files/Artifakt-Element-Medium.woff2') format('woff2');
    font-weight:400
}
@font-face{
    font-family:"Artifakt Element";
    font-display:swap;
    src:url('../files/ArtifaktElement-Bold.woff2') format('woff2');
    font-weight:700
}
*{
    margin:0;
    padding:0;
    font-family:"Artifakt Element";
    box-sizing:border-box
}
html{
    min-height:100%;
    overflow-x:hidden;
    scroll-behavior:smooth;
    font-size:16px
}
h1{
    font-size:clamp(30px, 4.3vw, 8vw);
    line-height:1.1;
    letter-spacing:-1.6px;
    margin:0.5em 0 1em
}
h2{
    font-size:clamp(28px, 2.083vw, 42px);
    line-height:1.2;
    letter-spacing:-1px;
    margin-top:0;
    margin-bottom:0.3em;
    color:#7a14af
}
h3{
    font-size:clamp(20px, 1.5625vw, 32px);
    line-height:1.2;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
    margin-top:0.2em;
    margin-bottom:0.4em
}
.h3-lila{
    line-height:1.2;
    margin-bottom:0.5em;
    color:#7a14af
}
h4{
    font-size:clamp(16px, 1.5vw, 26px);
    line-height:1.2
}
h5{
    font-size:clamp(16px, 1.2vw, 22px)
}
li{
    line-height:1.6;
    font-size:clamp(16px, 1vw + 0.5rem, 18px);
    color:hsl(0, 0%, 15%)
}
a{
    color:hsl(0, 0%, 15%)
}
.a-clean{
    text-decoration:none
}
.a-clean:hover{
    text-decoration:underline
}
figcaption,input,label,p,textarea{
    font-size:clamp(16px, 1vw + 0.5rem, 18px);
    line-height:1.4;
    margin-bottom:1vh;
    letter-spacing:0.0055em;
    color:hsl(0, 0%, 15%)
}
hr{
    margin:2.5em 0;
    height:1px;
    border:none;
    background-color:black
}
.lila{
    color:#7a14af;
    font-weight:bold
}
.logo-lila{
    color:#7a14af;
    font-weight:bold;
    text-shadow:0 0 5px white
}
.lila-shadow{
    font-weight:bold;
    text-shadow:0 0 5px #7a14af
}
.logo-white{
    font-weight:bold;
    text-shadow:0 0 5px white
}
table{
    margin-top:0.5em;
    margin-bottom:0
}
table + table{
    margin-top:2em
}
table + h3{
    margin-top:1.5em
}
table + h4{
    margin-top:1.0em
}
p + h3{
    margin-top:1.5em
}
ul + h3{
    margin-top:1.5em
}
body{
    height:100vh;
    min-height:100%
}
section{
    display:flex;
    flex-direction:column;
    word-wrap:break-word
}
section ul{
    margin-bottom:1vh
}
.content-wrapper section ul,ol li{
    padding-left:clamp(22px, 3vw, 40px)
}
.container{
    min-height:100%;
    width:100%;
    display:flex;
    flex-direction:column
}
.fade-in{
    opacity:0;
    transition:opacity 0.5s ease-in
}
.fade-in.appear{
    opacity:1
}
.wrapper{
    display:flex;
    position:fixed;
    left:0;
    justify-content:center;
    flex-direction:column;
    align-items:flex-start;
    z-index:1;
    width:100%
}
.langswitcher{
    display:flex;
    align-items:center;
    justify-content:center;
    align-content:center;
    width:100%;
    z-index:20;
    background-color:#D8E1ED;
    gap:1vw;
    padding:1vh 1vw
}
.langswitcher p{
    margin-bottom:0
}
.langswitcher a{
    background:#0071e3;
    border-radius:10px;
    padding:8px;
    color:white;
    text-decoration:none
}
.langswitcher div{
    width:100%;
    height:100%;
    display:flex
}
.containerlangactive{
    min-height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    margin-top:6vh
}
.header-container{
    background-color:#003D8F;
    width:100%;
    padding:1vh
}
header{
    width:76vw;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    z-index:1;
    gap:1vw;
    border-radius:20%;
    font-size:clamp(8px, 2em, 44px);
    width:100%;
    padding:0 12vw
}
.title a{
    font-size:clamp(8px, 1.1em, 44px);
    color:white;
    text-decoration:none
}
nav{
    display:flex;
    justify-content:center
}
nav img{
    height:45px
}
nav ul{
    display:flex;
    flex-direction:row;
    align-content:center;
    justify-content:right;
    align-items:center;
    gap:1vw;
    list-style-type:none
}
nav ul li{
    color:white
}
nav ul li a{
    font-size:18px;
    position:relative;
    display:block;
    display:inline-block;
    color:white;
    padding:8px;
    text-decoration:none
}
nav ul li a:hover{
    background-color:#7a14af;
    border-radius:10px;
    transition:linear 0.2s
}
.mobile-menu{
    display:none;
    cursor:pointer;
    z-index:2
}
.mobile-menu div{
    width:25px;
    height:5px;
    background-color:white;
    margin:5px
}
main{
    margin-top:7vh;
    display:flex;
    flex-direction:column
}
.content-wrapper{
    padding:0 12vw
}
.headings{
    text-align:center;
    align-items:center;
    width:100%;
    height:70vh;
    display:flex;
    justify-content:flex-end;
    margin-bottom:5vh;
    overflow:hidden
}
.headings > img{
    background-color:white;
    border-radius:15%;
    height:32vh;
    margin-bottom:2em
}
.headings h1{
    background-color:white;
    border-radius:20px;
    padding:1vh 1vw
}
.headings h2{
    background-color:white;
    border-radius:20px;
    color:black;
    padding:1vh 1vw;
    margin-bottom:5vh
}
.heading-home{
    background:url("../img/other/Referenzen.webp") no-repeat 100% 100%;
    background-size:cover;
    background-repeat:space
}
/* .heading-projects{
    background:url("../img/other/Referenzen.webp") no-repeat 100% 100%;
    background-size:cover;
    background-repeat:space
} */
.heading-experience{
    background-image:url("../img/other/Experience.webp");
    background-position:bottom;
    background-size:cover
}
.heading-contact{
    background-image:url("../img/other/Kontakt.webp");
    background-position:bottom;
    background-size:cover
}
.heading-security{
    background-image:url("../img/other/FEM.webp");
    background-position:bottom;
    background-size:cover
}