html,body{
    margin:0px;
    user-select: none;
    font-family:"CustomerFont", sans-serif;
    font-size: 100%;
    overflow:auto;
}
a
{
    color:black;
    text-decoration: none;
    cursor:pointer;
}
a:hover{
    color:#505050;
}
div.background{
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
    background-color:#ffaa00
}
div.threebar>a>div{
    position:fixed;
    right:3.8vw;
    top:2.1vh;
    width:5.5vh;
    height:5.5vh;
    z-index:500;/*topmost*/
    
    
}
div.threebar>a>div>img{
    width:100%;
}
div.bigContentArea{
    position:fixed;
    left:2vw;
    top:2vh;
    right:22.8vw;
    bottom:2vw;
    background-color:transparent;
    display:none;
    z-index:200;
    
}
div.ribbon{
    position:fixed;
    top:0px;
    right:2.4vw;
    bottom:0px;
    height:100%;
    width:18.4vw;
    background-color:rgba(255,255,255,.8);
    z-index:200;
}
div.ribbon>div.ribbonheader{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height:9.7vh;    
}

div.ribbon>div.ribbonheader2{
    position:absolute;
    top:1vh;
    height:5.5vh;
    left:1vh;
    right:1vh;
    height:6.5vh;
    
}
div.ribbon>div.ribbonheader2>div.logo>a>div{
    display:flex;    
    height:6.5vh;
}
div.ribbon>div.ribbonheader2>div.logo>a>div>img
{
    height:100%;
}
div.ribbon>div.ribbonheader2>div.menu{
    
    position: absolute;
    top:0px;
    left:7vh;
    height:6.5vh;
    max-height:6.5vh;
    overflow: hidden;
    padding:0px;
    right:0px;
    display: flex;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:right;
}
div.ribbon>div.ribbonheader2>div.menu>div.mp
{
    width:100%;
    flex:1;
    margin:0px;
}
div.ribbon>div.ribbonheader2>div.menu>div.mp>a>div{
    width:100%;
    text-align:right;
    font-size:1.5vh;
}

div.ribbon>div.ribbonheader>a>div.logo{
    position:absolute;
    top:2.1vh;
    width:5.5vh;
    height:5.5vh;
    left:1.4vw;
}

div.ribbon>div.ribbonheader>a>div.logo>img{
    height:100%;
}
div.container{
    position:absolute;
    top:9.7vh;
    left:0px;
    right:0px;
    bottom:0px;
    
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
div.container>div.menu{
    display:flex;
    height:auto;
    box-sizing: border-box;
    
    display:none;
}
div.menu>div{
    margin-left:1vw;
    margin-right:1vw;
}
div.menu>div>div.ll>a{
    text-decoration: none;
    display: block;
    font-size:2vh;
    height:4.55vh;
    color:black;
    
}
div.menu>div>div.ll{
    
    border-style:solid;
    border-width:0px;
    border-top-width:0px;
    display:flex;
    height:3em;
    width:100%;
    text-align: right;
    flex-direction:column;
    justify-content:end;
}
div.menu>div>div.rs{
    display:flex;
    height:2em;
    width:100%;
    text-align: right;
    flex-direction:column;
    justify-content:start;
}
div.menu>div>div.rs>a{
    text-decoration: none;
    display:block;
    font-size:1.5vh;
    height:2vh;
    color:black;
}
div.menu>div>div.bo{
    width:100%;
    height:1px;
    border-style:solid;
    border-width:0px;
    border-top-width: 1px;
    margin-top:1vh;
    margin-bottom:1vh;
}
div.container>div.contentArea{
    width:100%;
    position:relative;
    height:100%;
    
}
div.contentArea>div.header{
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    height:5vh;
    display:flex;
    justify-content: end;
    margin-left:1vw;
    margin-right:1vw;
}
div.contentArea>div.header.isActive
{
    cursor:pointer;
    
}
div.contentArea>div.header.isActive:hover
{
    color:#505050;
}
div.contentArea>div.header>h1{
    margin:0px;
    font-weight:500;
    text-transform: uppercase;
    text-align:right;
}
div.contentArea>div.contentContainer{
    position:absolute;
    top:5vh;
    left:0px;
    right:0px;
    bottom:8vh;
    
    height:auto;
}

div.contentContainer>div.content{
    position:absolute;
    max-height:100%;
    height:100%;
    width:100%;
}
div.container>div.bottom{
    width:100%;
    height:8vh;
    position:absolute;
    bottom:0px;
    display:none;   
}
div.container>div.bottom>a>div{
    display:flex;
    width:100%;
    height:100%;
    
    justify-content:center;
    align-content: center;
    align-items: center;
}
div.container>div.bottom>a>div>img
{
    height:70%;
}

div.container>div.bottom2{
    width:100%;
    height:8vh;
    position:absolute;
    bottom:3vh;
    display:none;   
}
div.container>div.bottom2>a>div{
    display:flex;
    width:100%;
    height:100%;
    
    justify-content:center;
    align-content: center;
    align-items: center;
}
div.container>div.bottom2>a>div>img
{
    height:70%;
}
div.container>div.bottomAction
{
    position:absolute;
    right:0px;
    bottom:0px;
    left:0px;
    height:3vh;
    display:flex;
    align-items:center;
    justify-content:center;
    
}

div.subContentLayerPrj{
    
    position:fixed;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    overflow:hidden;
    border-style:none;   
    z-index:100;
    
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
div.subContentLayerProfile{
    position:fixed;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    overflow:hidden;
    border-style:none;   
    z-index:100;
    display:none;
}
div.subContentLayer
{
    position:fixed;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    overflow:hidden;
    border-style:none;   
    z-index:100;
}
div.subContentLayerOverlay{
     position:fixed;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    overflow:hidden;
    border-style:none;   
    z-index:150;
    background-color:transparent;
}
div.subContentLayerOverlay.milky
{
    background-color:#FFFFFFAA !important;
}

div.mainContent>div.subContentLayer
{
    position:fixed;
    right:0px;
    bottom:0px;
    left:0px;
    top:0px;
    overflow:hidden;
    border-style:none;
    
    
}
div.imageCycleContent{
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0); /* fallback color */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation-timing-function: linear;
}

div.scrollableContent{
    position:absolute;
    height:100%;
    width:100%;
    overflow: scroll;
}
.scrollable::-webkit-scrollbar {
    width: 4px; /* Breite der vertikalen Scrollbar */
    height: 4px; /* Höhe der horizontalen Scrollbar */
}

.scrollable::-webkit-scrollbar-thumb {
    background: #888; /* Farbe des Scrollbalkens */
    border-radius: 1px; /* Runde Ecken für den Scrollbalken */
}

.scrollable::-webkit-scrollbar-thumb:hover {
    background: #555; /* Farbe des Scrollbalkens bei Hover */
}

.scrollable::-webkit-scrollbar-track {
    background: #f0f0f0; /* Hintergrund der Scrollleiste */
}

/* Für Firefox */
.scrollable {
    overflow-y:scroll;
    scrollbar-width:none ; /* Dünne Scrollleiste */
    scrollbar-color: #888 #f0f0f0; /* Farbe des Scrollbalkens und Hintergrunds */
}

div.projectList{
    width:100%;
    
}
div.projectList>a
{
    display: block; 
    text-decoration: none; 
    color: inherit; 
    cursor: pointer;
    margin-bottom: 1vh;
    box-sizing: border-box;
}
div.projectList>a>div
{
    position: relative;
    width: 100%; /* 100% der Breite des Elternelements */
    aspect-ratio: 16 / 11; /* Seitenverhältnis 16:9 */
    overflow: hidden; /* Überflüssige Bildteile abschneiden */
    background: #f0f0f0; /* Optional: Hintergrundfarbe */
    
}
div.projectList>a>div>img{
    
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%; /* Mindestens so breit wie das Container-Element */
    min-height: 100%; /* Mindestens so hoch wie das Container-Element */
    transform: translate(-50%, -50%); /* Zentriert das Bild */
    object-fit: cover;
}
div.start{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
    display:flex;
    align-items:end;
}
div.start>img
{
    width:100%;
}

div.profilcontent>*{
    font-size:2vh;
    
    padding-left:1vw;
    padding-right:1vw;
}

div.teammember{
    width:100%;
    position:relative;
    aspect-ratio: .97;
    margin-bottom:1vh;
    
}
div.teammember>div.imageContainer
{
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    overflow:hidden;
}

div.teammember>div.imageContainer>img
{
 width:100%;   
}
div.teammember>div.empInfo{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:0px;
    
}
div.teammember>div.empInfo>div.inf{
    display:flex;
    width:100%;
    height:30%;
}
div.teammember>div.empInfo>div.inf{
    display:none;
    position:absolute;
    left:0px;
    right:0px;
    bottom:5%;
    height:30%;
    
}
div.teammember>div.empInfo>div.inf>div{
    display:flex;
    justify-content: center;
    font-size:2vh;
    text-align:center;
}
div.teammember>div.empInfo>div.inf>div:not(:last-child)
{
 text-transform: uppercase;
   
}
div.teammember>div.empInfo>div.inf>div:last-child{
    font-size:1.8vh;
}
div.teammember:hover>div.empInfo>div.inf{
    display:block;
}
div.teammember:hover>div.empInfo{
    background-color:#FFFFFFAA;
}
div.selector{
    
    position:absolute;
    left:0px;
    right:0px;
    bottom:0vw;
    
    height:20vh;
}

div.selector>div.imglist{
    position:absolute;
    left:5vw;
    right:5vw;
    top:0px;
    bottom:0px;
    
    display:flex;
    flex-direction:row;
    overflow:hidden;
    overflow-x:scroll
}
div.selector>div.imglist>div.elements{
    display:flex;
    flex-direction:row;
    height:100%;
    width:auto;
    gap:3vh
}
div.selector>a.left>div{
    width:4vw;
    top:0px;
    bottom:0px;
    left:0px;
    
}
div.ocImgLarge>img{
    height:100%;
}
div.ocImgLarge{
    position:absolute;
    left:0px;
    top:0px;
    bottom:27vh;
    overflow: hidden;
    width:100%;
    display:flex;
    justify-content: center;
}
div.selector>div.imglist>div.elements>a{
    text-decoration: none;
    cursor:pointer;
}
div.selector>div.imglist>div.elements>a>div{
    height:100%;
    
}
div.selector>div.imglist>div.elements>a{
    display:block;
    
}
div.selector>div.imglist>div.elements>a:not(:last-child)>div
{
    
}
div.selector>div.imglist>div.elements>a>div>img
{
    height:100%;
}
a.btn_right>div{
    width:4vw;
    position:absolute;
    right:0px;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    cursor:pointer;
}
a.btn_left>div{
 
    cursor:pointer;
    width:4vw;
    position:absolute;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    
    
}

div.projectcontent{
     font-size:2vh;
    
    padding-left:1vw;
    padding-right:1vw;   
}
div.projectcontent>h1.name{
    margin-top:0px;
    font-size:3vh;
    font-weight:400;
    margin-bottom:0px;
  white-space: nowrap;/* Verhindert, dass der Text von sich aus umbricht */
}
div.projectcontent>div.description{
    margin-top:4vh;
}
div.einblickImage{
    display:flex;
    height:50vh;
    position:relative;
}
div.einblickImage>a.navLeft>div>img{
    height:4vw;
    width:4vw;
}

div.einblickImage>a.navLeft>div{
    position:absolute;
    
    left:0px;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    width:4vw;
}div.einblickImage>a.navRight>div>img{
    height:4vw;
    width:4vw;
}
a{
    cursor:pointer;
}
div.einblickImage>a.navRight>div{
    position:absolute;
    right:0px;
    height:100%;
    display:flex;
    justify-content: center;
    align-items:center;
    width:4vw;
    
}
div.einblickImage>div.imgCont{
    position:absolute;
    top:0px;
    width:100%;
    display:flex;
    
    overflow:hidden;
    flex-direction:row;
    justify-content: center;
}
div.einblickImage>div.selectBtns{
    position:absolute;
    bottom:0px;
    width:100%;
    display:flex;
    height:5vh;
    flex-direction:row;
    justify-content: center;
    background-color:transparent;
    align-items:center;
    gap:1vw;
}
a.imageSelect:hover>div{
    background-color:#c0c0c0
}
a.imageSelect.active>div{
    background-color:#c0c0c0;;
}
a.imageSelect>div{
    display:flex;
    height:1vw;
    width:1vw;
    background-color:white;
    border-color:black;
    border-style: solid;
    border-width:2px;
    border-radius:.5vw;
}
div.einblickImage>div.imgCont>img{
    
    max-height:50vh ;
}
div.ebTitle{
    font-size:3vh;
    font-weight:400;
}

div.ebContent{
    font-size:2vh;
    font-weight:400;
}
div.einblick{
    user-select: none;
    width:80%;
    margin-bottom:3vh;
    min-height:90%;
}
div.ebList{
    display:flex;
    width:100%;
    flex-direction:column;
    align-items: center;
    height:100%;
}
a.imgListElementClickable
{
    position:relative;
}
a.imgListElementClickable>div.mImg
{
    height:100%;
}
a.imgListElementClickable>div.ytlogo
{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    display:flex;
    justify-content:center;
    align-items:center;
}
a.imgListElementClickable>div.ytlogo>img
{
    height:8vh !important;
}

div.clickable{
    cursor:pointer
}

div.vitaElement{
    width:100%;
    height:auto;
}
div.vitaPerson{
    width:100%;
    height:auto;
}
div.vitaPerson>div.vitaTitle
{
    width:100%;
    height:3vh;
    display:flex;
    justify-content:start;
    align-items:center;
    flex-direction: row;
    text-transform: uppercase;
        
}
div.vitaElement>div.vitaStart{
    width:100%;
    height:3vh;
    display:flex;
    justify-content:start;
    align-items:center;
    flex-direction: row;
}
div.vitaElement>div.vitaContent{
    width:100%;
    min-height:3vh;
    display:flex;
    justify-content:start;
    align-items:center;
    flex-direction: row;
    padding-left:4vh
}
div.ctentry{
    opacity: .5;
    width:100vw;
    display:flex;
    flex-direction:row;
    align-items:center;
    
}
div.ctentry>div.img
{
    padding-left:3vh;
    width:5vh;
    height:5vh;
    display:flex;
    align-items:center;
}
div.ctentry>div.img>img
{
    width:3vh;
    height:3vh;
    opacity: .5;
}