/* __________________________________________________________________________________ */
/* ______________________________[[[  Allgemein  ]]]_________________________________ */
/* __________________________________________________________________________________ */


*{
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    scrollbar-width: none;
    border: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
}

.german {
  display: none;
}

::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar {
    display: none;
    
}


html {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: none; /* Deaktiviert das Bouncing */
    max-width: 100vw;
    scroll-behavior: smooth;
    overflow-x: hidden;

}

button:hover {
    cursor: pointer;
}

body {
    display: flex;
    width: 100vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


section{
    width: 100vw;
    max-width: 100vw;

}

/* ====================[[[  Colors  ]]]==================== */


:root {
    /* --background-color: rgb(54, 80, 104); */
    /* --section-color: #646F7A; */
    --logo-color: #323232;
    /* --section-bright: #828F9B; */
    --accent-color: rgb(255, 102, 31);
    /* --offwhite: #F9FCFF; */
    --offwhite: #f6f6f6;
    --lightgray: #F0F0F0;
    --mediumgray: #dddee0;
    /* --offblack: #253037; */
    --offblack: #28282C;
    /* --Background-gradient: linear-gradient(20deg,#ffd4af 20%,#e3e3e3);
    --Background-gradient: linear-gradient(20deg, #c3dcee 10%, #f4f2df 90%);
    --Background-gradient: linear-gradient(20deg, #719AC5 10%, #C0CAD4, #F4E0D9 80%);
    --Background-gradient: linear-gradient(20deg, #F7E8E5 20%, #FFF7EC, #F1FCFF 90%);
    --Background-gradient: linear-gradient(20deg, #F7E8E5 20%, #FFF7EC, #F1FCFF 90%); */
    --Background-gradient: linear-gradient(20deg, #ffe3de 20%, #ffeed7, #e7faff 90%);
    /* --Background-gradient2: linear-gradient(180deg, #ffffff, #d5f6ffb8); */


}





/* ====================[[[  Font  ]]]==================== */


h1, h2, h3, h4, h5, h6, p {
    all: unset;
}

@font-face {
    font-family: "rubik";
    src: url("fonts/Rubik-Regular.woff2") format('woff2'),
         url("fonts/Rubik-Regular.woff") format('woff');
         font-weight: 400;
         font-style: normal;
}

@font-face {
    font-family: "rubik-light";
    src: url("fonts/Rubik-Light.woff2") format('woff2'),
         url("fonts/Rubik-Light.woff") format('woff');
         font-weight: 200;
         font-style: normal;
}

@font-face {
    font-family: "rubik-medium";
    src: url("fonts/Rubik-Medium.woff2") format('woff2'),
         url("fonts/Rubik-Medium.woff") format('woff');
         font-weight: 500;
         font-style: normal;
}



h1{
    font-family: "rubik-medium", sans-serif;
    color: var(--logo-color);
    font-size: clamp(2rem, 6.15vw, 20vh);
    letter-spacing:2%;
    text-align: center;

}


h2{
    font-family: "rubik", sans-serif;
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    color: var(--logo-color);
    margin-bottom: 0.3rem;

}

h3{
    font-family: "rubik", sans-serif;
    font-size: clamp(2rem, 3.5vw, 4.5rem);
}

h4{
    font-family: "rubik-medium", sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-top: 2rem;
    margin-bottom: 0.15rem;

}



p, a, li{
    font-family: "rubik", sans-serif;
    color: var(--offblack);
    font-size: 1.1rem;
    letter-spacing: 5%;
    line-height: 150%;
}

.white-font{
    font-family: "rubik-light", sans-serif;
    color: var(--offwhite);
}

.section-title{
    position: absolute;
    letter-spacing:50%;
    top: 2rem;
    text-align: center;
}

strong{
    font-family: "rubik-medium", sans-serif;

}

















/* __________________________________________________________________________________ */
/* ________________________________[[[  Hero  ]]]____________________________________ */
/* __________________________________________________________________________________ */


#hero{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
    min-height: 33rem; /* statt 33 rem (gleicht abstand in services aus) */
    flex: 0 0 auto;
    background: var(--Background-gradient);
    overflow: hidden;
}

.nav-blur{
    mask-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255, 255, 255),rgba(255, 255, 255, 0.95),  rgba(255, 255, 255, 0));
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 4rem;
    /* background-color: rgba(255, 255, 255, 0); */
    position: fixed;
    top: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index:4;
    pointer-events: none;


}

.hero-nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 3rem;
    background-color: rgba(255, 255, 255 0);
    position: fixed;
    top: 0;
    z-index: 5;
    padding: 0 4vw;
    max-width: 100vw;
}

.logos-container{
    display: flex;
    margin-top: 0.5rem;
}

.logo-box{
    height: 14vh;
    min-height: 100%;
    max-width: 5.45rem;
    aspect-ratio: 1.2 / 1;
    background-color: var(--logo-color);
    border-radius: 0 0 1vh 1vh;
    transition: height 0.7s ease;
    margin-top: -1rem;
}

.weißer-banner{
    background-color: white;
}

.logo-box.scrolled {
    height: calc(100% + 1rem);
}

.logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-position: bottom;
}

.logo-box2{
    height: 100%;
    min-height: 100%;
    width:auto;
    overflow: hidden;
}

.logo-image2 {
    height: 100%;
    object-fit: contain;
    object-position: center left;
    margin-left: -45vw;
    transition: all 0.5s ease;

}

.logo-image2.scrolled2 {
    margin-left: 0;
    transition: all 0.7s ease 0.4s;
}

.menu{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-right: -1rem;
}

.burger {
    display: none;
}

.menu-a{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.45rem;
    cursor: pointer;
    text-align: center;
    min-width: 5.5rem;
}

/* .go-english{
    background-image: url(/elements/uk_flag.png);

}

.go-german{
    background-image: url(/elements/german_flag.png);
} */

/* .lang{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0) !important;
    max-height: 1.3rem;
    min-width: 2rem;
    border-radius: 0.2rem;
} */

/* .lang:hover{

      transform: scale(1.08);


} */

.menu-a:hover{
    color: var(--accent-color);
    
}

.hero-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 65vw;
    max-width: 220vh;
    height: 20vh;
    flex: 1 1 auto;
    margin-top: 40px;
    z-index: 2;
    text-align: center;
}

.ocean{
    height: 134px;
    width: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
    overflow-x: hidden;


}

.wave-main {
    transform: translate(0,0,0);
    background: url(elements/wave-breit.svg) repeat-x;
    height: 132px;
    width: 9600px;
    overflow-x: hidden;
    animation: wave-main 6s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

@keyframes wave-main {
    0% { margin-left: -900px;}
 
    100% { margin-left: -3300px;}
}






/* __________________________________________________________________________________ */
/* ________________________________[[[  services  ]]]____________________________________ */
/* __________________________________________________________________________________ */


#services{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 255vh;
    min-height: 84.15rem;
    padding-top: 10vh;
    padding-bottom: 10vh;
    background-color: white;
    flex: 0 0 auto;
    position: relative;
}

#services .section-title{
    top: 1rem;
}


.services-trio-container{
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    width: 100vw;
    height: 60vh;
    flex: 0 0 auto;
    top: 20vh;
    position: -webkit-sticky;
    position: sticky;
    transition: all 0.3s ease-out;
    max-width: 115rem;
    max-height: 100vw;
    padding: 0 7vw;
    /* overflow-x: hidden; */
}



.trio-background-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* aspect-ratio: 1/1 !important; */
    /* background-color: rgba(0, 0, 0, 0.064); */
}

.rotate-compensator{
    height: 100%;
    width: 100%;
    transition: rotate 0.6s ease-out;
    rotate: 0deg;

}

.compensate{
    rotate: -120deg;
}


.services-trio-background{
    height: 100%;
    width: 100%;
    max-width: 32rem;
    max-height: 32rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.3s ease-out 0.1s;
    transform-origin: center center;
    flex: 0 0 auto;
}

.animate-1{
    animation: smallBig 0.45s ease-out forwards;
    
}


@keyframes smallBig {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.65);
    }
    100% {
      transform: scale(1);
    }
}


.animate-2{
    animation: smallBig-2 0.45s ease-out forwards;
    
}

@keyframes smallBig-2 {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.65);
    }
    100% {
      transform: scale(1);
    }
}

.animate-3{
    animation: rotate 0.6s ease-out forwards;
    
}

@keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(120deg);
    }
}

.animate-4{
    animation: rotate-2 0.6s ease-out forwards;
    
}

@keyframes rotate-2 {
    0% {
      transform: rotate(120deg);
    }
    100% {
      transform: rotate(0deg);
    }
}




.services-trio{
    height: 60vh;
    width: 60vh;
    max-width: 32rem;
    max-height: 32rem;
    border-radius: 50%;
    transition: rotate 0.3s ease-out;
    transform-origin: center center;
    aspect-ratio: 1/1 !important;
    rotate: 0deg;
}


.rotate-120{
    rotate: 120deg;
}

.rotate-240{
    rotate: 240deg;
}

.rotate-360{
    rotate: 360deg;
}

.rotate-neg-120{
    rotate: -120deg;
    transition: rotate 0.3s ease-out;

}

.rotate-neg-240{
    rotate: -240deg;
    transition: rotate 0.3s ease-out;

}

.rotate-neg-360{
    rotate: -360deg;
    transition: rotate 0.3s ease-out;

}

.slowtate-neg-120{
    rotate: -120deg;
    transition: rotate 0.6s ease-out;

}


.outer-circle {
    width: 71%;
    height: 71%;
    /* background-color: rgb(207, 207, 207); */
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}


.blob {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height:45%;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
}

.activator{
    background-color: #424242;
    height: 70%;
    width: 70%;
    content: "";
    position: inherit;
    border-radius: 50%;
    transition: background-color 0.3s ease 0.3s;

}

.blob-active{
    background-color: var(--accent-color);

}

.blob-3 { 
    top: calc(50% + 48% * sin(0deg)); 
    left: calc(50% + 48% * cos(0deg)); 
    transform: translate(-50%, -50%);
}        

.blob-2 { 
    top: calc(50% + 48% * sin(120deg)); 
    left: calc(50% + 48% * cos(120deg)); 
    transform: translate(-50%, -50%);

}

.blob-1 { 
    top: calc(50% + 48% * sin(240deg)); 
    left: calc(50% + 48% * cos(240deg)); 
    transform: translate(-50%, -50%);
}



.services-icon {
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.services-icon img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: rotate 0.3s ease-out;

}



.trio-schubser{
    pointer-events: none;
    height: 100%;
    width: 0%;
    transition: all 0.35s ease-out;
}

.get-width{
    width: 65%;
    display: flex;
    flex: 0 0.6 auto; 
}


.services-content-container{
    display: flex;
    flex-direction: column;
    justify-content: flex start;
    width: 100vw;
    max-width: 115rem;
    flex: 0 0 auto;
    overflow: hidden;
    margin-top: -57vh;
    padding: 0 7vw;
}

.mobile-sticky{    /* erst ab mobile muss es sticky werden */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: fit-content;
    height: fit-content;

}

.services-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50vh;
    min-height: 16.5rem;
    width: 100%;
    overflow: hidden;
    padding: 0 2vw;
    transition: all 0.3s ease-out 0.1s;
}

#services h2{
    width: 39vw;
    max-width: 35rem;
}

.services-main-text{
    padding-right: 52%;
    margin-bottom: 30vh;
}

.identity{
    padding-left: 45%;
    margin-right: 2vw;
}

.life{
    padding-left: 45%;
    margin-right: 2vw;

}

.scale{
    padding-left: 45%;
    margin-right: 2vw;

}

.button-container{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 4rem;
    
}

.button{
    color: var(--offblack);
    box-sizing: content-box;
    height: 2rem;
    border-radius: 1rem;
    padding: 0 1rem ;
    /* background-color: var(--offblack); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* transition: all 0.2s ease-out; */
    border: 0.1rem solid var(--offblack);
    cursor: pointer;
}

.double-button{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.button:hover{
    border: 0.1rem solid var(--accent-color);
    color: var(--accent-color);
}

/* __________________________________________________________________________________ */
/* ________________________________[[[  drive  ]]]____________________________________ */
/* __________________________________________________________________________________ */


#drive{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
    min-height: 29.7rem;
    flex: 0 0 auto;
    position: relative;
    background-color: var(--offwhite);
    padding-top: 3rem;


}

#drive p{
    margin-bottom: 1rem;
}

.drive-bg{
    width: 94%;
    height: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-bottom: 2rem; */

}
.raster{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    align-items: center;
    justify-content: center;
    /* background-color: green; */
}

.drive-visual{
    aspect-ratio: 1/0.6 !important;
    width: 100%;
    min-width: 23rem;
    /* background-color: rgb(35, 145, 108); */
    /* border-radius: 1rem; */
    background-image: url(/images/Weltkarte-squares-gradient-2.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color: #daf1ff; */
    position: relative;
}


/* .drive-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/images/weltkarte-red-dots-only.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

-webkit-mask-image: linear-gradient(to right,#000 0%,#000 90%,transparent 100%);
mask-image: linear-gradient(to right,#000 0%,#000 90%,transparent 100%);




  -webkit-mask-size: 0% 100%;
  mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  animation: reveal 0.4s
   linear forwards;
}

@keyframes reveal{
  to{
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
} */


/* .drive-visual::after{
  content:"";
  position:absolute;inset:0;
  background:center/contain no-repeat;
  animation:frames 2.4s steps(1) forwards;
}
@keyframes frames{
  0%{background-image:url(/images/dots-1.svg)}
  33.33%{background-image:url(/images/dots-2.svg)}
  66.66%{background-image:url(/images/dots-3.svg)}
  100%{background-image:url(/images/dots-4.svg)}
} */




/* .drive-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/elements/dot-de.svg), 
                    url(elements/dot-eg.svg),
                    url(elements/dot-sy.svg)
                    
                    
                    
                    
                    ;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
} */



.dots{
  position:absolute;
  inset:0;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  /* mix-blend-mode: lighten; */

    /* animation:fadein 0.7s ease forwards; */

}

.dots-animated{
    animation:fadein 1.5s ease forwards;


}

/* red */

/* .dot-germany{background-image:url(/elements/dot-de.svg);animation-delay:0.70s;}
.dot-egypt{background-image:url(/elements/dot-eg.svg);animation-delay:1.40s;}
.dot-syria{background-image:url(/elements/dot-sy.svg);animation-delay:2.01s;}
.dot-turkye{background-image:url(/elements/dot-turk.svg);animation-delay:2.55s;}
.dot-malaysia{background-image:url(/elements/dot-malay.svg);animation-delay:3.02s;}
.dot-algeria{background-image:url(/elements/dot-alg.svg);animation-delay:3.43s;}
.dot-gambia{background-image:url(/elements/dot-gamb.svg);animation-delay:3.78s;}
.dot-philipines-1{background-image:url(/elements/dot-ph1.svg);animation-delay:4.09s;}
.dot-tunesia{background-image:url(/elements/dot-tunes.svg);animation-delay:4.35s;}
.dot-sudan{background-image:url(/elements/dot-sud.svg);animation-delay:4.58s;}
.dot-iran{background-image:url(/elements/dot-iran.svg);animation-delay:4.78s;}
.dot-angola{background-image:url(/elements/dot-ang.svg);animation-delay:4.96s;}
.dot-brazil{background-image:url(/elements/dot-brz.svg);animation-delay:5.11s;}
.dot-indonesia{background-image:url(/elements/dot-indon.svg);animation-delay:5.25s;}
.dot-nicaragua{background-image:url(/elements/dot-nica.svg);animation-delay:5.37s;}
.dot-india{background-image:url(/elements/dot-ind.svg);animation-delay:5.49s;}
.dot-bangladesh{background-image:url(/elements/dot-bangl.svg);animation-delay:5.60s;}
.dot-yemen{background-image:url(/elements/dot-yemen.svg);animation-delay:5.70s;}
.dot-dominican-republic{background-image:url(/elements/dot-domin.svg);animation-delay:5.81s;}
.dot-philipines-2{background-image:url(/elements/dot-ph2.svg);animation-delay:5.91s;}
.dot-mexico{background-image:url(/elements/dot-mex.svg);animation-delay:6.01s;}
.dot-namibia{background-image:url(/elements/dot-nam.svg);animation-delay:6.11s;} */


/* blck */

/* .dot-germany{background-image:url(/elements/dot-de-black.svg);animation-delay:0.70s;}
.dot-egypt{background-image:url(/elements/dot-eg-black.svg);animation-delay:1.40s;}
.dot-syria{background-image:url(/elements/dot-sy-black.svg);animation-delay:2.01s;}
.dot-turkye{background-image:url(/elements/dot-turk-black.svg);animation-delay:2.55s;}
.dot-malaysia{background-image:url(/elements/dot-malay-black.svg);animation-delay:3.02s;}
.dot-algeria{background-image:url(/elements/dot-alg-black.svg);animation-delay:3.43s;}
.dot-gambia{background-image:url(/elements/dot-gamb-black.svg);animation-delay:3.78s;}
.dot-philipines-1{background-image:url(/elements/dot-ph1-black.svg);animation-delay:4.09s;}
.dot-tunesia{background-image:url(/elements/dot-tunes-black.svg);animation-delay:4.35s;}
.dot-sudan{background-image:url(/elements/dot-sud-black.svg);animation-delay:4.58s;}
.dot-iran{background-image:url(/elements/dot-iran-black.svg);animation-delay:4.78s;}
.dot-angola{background-image:url(/elements/dot-ang-black.svg);animation-delay:4.96s;}
.dot-brazil{background-image:url(/elements/dot-brz-black.svg);animation-delay:5.11s;}
.dot-indonesia{background-image:url(/elements/dot-indon-black.svg);animation-delay:5.25s;}
.dot-nicaragua{background-image:url(/elements/dot-nica-black.svg);animation-delay:5.37s;}
.dot-india{background-image:url(/elements/dot-ind-black.svg);animation-delay:5.49s;}
.dot-bangladesh{background-image:url(/elements/dot-bangl-black.svg);animation-delay:5.60s;}
.dot-yemen{background-image:url(/elements/dot-yemen-black.svg);animation-delay:5.70s;}
.dot-dominican-republic{background-image:url(/elements/dot-domin-black.svg);animation-delay:5.81s;}
.dot-philipines-2{background-image:url(/elements/dot-ph2-black.svg);animation-delay:5.91s;}
.dot-mexico{background-image:url(/elements/dot-mex-black.svg);animation-delay:6.01s;}
.dot-namibia{background-image:url(/elements/dot-nam-black.svg);animation-delay:6.11s;} */




/* orange */

.dot-germany{background-image:url(/elements/dot-de-orange.svg);animation-delay:0.70s;}
.dot-egypt{background-image:url(/elements/dot-eg-orange.svg);animation-delay:1.40s;}
.dot-syria{background-image:url(/elements/dot-sy-orange.svg);animation-delay:2.01s;}
.dot-turkye{background-image:url(/elements/dot-turk-orange.svg);animation-delay:2.55s;}
.dot-malaysia{background-image:url(/elements/dot-malay-orange.svg);animation-delay:3.02s;}
.dot-algeria{background-image:url(/elements/dot-alg-orange.svg);animation-delay:3.43s;}
.dot-gambia{background-image:url(/elements/dot-gamb-orange.svg);animation-delay:3.78s;}
.dot-philipines-1{background-image:url(/elements/dot-ph1-orange.svg);animation-delay:4.09s;}
.dot-tunesia{background-image:url(/elements/dot-tunes-orange.svg);animation-delay:4.35s;}
.dot-sudan{background-image:url(/elements/dot-sud-orange.svg);animation-delay:4.58s;}
.dot-iran{background-image:url(/elements/dot-iran-orange.svg);animation-delay:4.78s;}
.dot-angola{background-image:url(/elements/dot-ang-orange.svg);animation-delay:4.96s;}
.dot-brazil{background-image:url(/elements/dot-brz-orange.svg);animation-delay:5.11s;}
.dot-indonesia{background-image:url(/elements/dot-indon-orange.svg);animation-delay:5.25s;}
.dot-nicaragua{background-image:url(/elements/dot-nica-orange.svg);animation-delay:5.37s;}
.dot-india{background-image:url(/elements/dot-ind-orange.svg);animation-delay:5.49s;}
.dot-bangladesh{background-image:url(/elements/dot-bangl-orange.svg);animation-delay:5.60s;}
.dot-yemen{background-image:url(/elements/dot-yemen-orange.svg);animation-delay:5.70s;}
.dot-dominican-republic{background-image:url(/elements/dot-domin-orange.svg);animation-delay:5.81s;}
.dot-philipines-2{background-image:url(/elements/dot-ph2-orange.svg);animation-delay:5.91s;}
.dot-mexico{background-image:url(/elements/dot-mex-orange.svg);animation-delay:6.01s;}
.dot-namibia{background-image:url(/elements/dot-nam-orange.svg);animation-delay:6.11s;}


@keyframes fadein{
    0% {
        transform: 0;
    }

    25% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;

    }
}

/* @keyframes fadein{to{opacity:1;}} */


















.location{

    display: flex;
    height: 8%;
    width: 5%;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: bottom center;
    z-index: 2;
    background-image: url(/images/location-017.svg);
    rotate: 0deg;

    transform: scale(0);

}

.location-animated{
    animation:grow .7s ease forwards;
}

.location-germany{top:8.8%;left:43.6%;animation-delay:0.90s;}
.location-egypt{top:24.1%;left:52.7%;animation-delay:1.60s;}
.location-syria{top:18%;left:54.55%;animation-delay:2.21s;}
.location-turkye{top:16%;left:50.9%;animation-delay:2.75s;}
.location-algeria{top:27%;left:41.6%;animation-delay:3.63s;}
.location-gambia{top:36.4%;left:36%;animation-delay:3.98s;}
.location-philipines-1{top:39.2%;right:9.25%;animation-delay:4.29s;}
.location-tunesia{top:20.9%;left:44.9%;animation-delay:4.55s;}
.location-sudan{top:30.2%;left:50.75%;animation-delay:4.78s;}
.location-iran{top:20.7%;left:60.1%;animation-delay:4.98s;}
.location-angola{top:54.7%;left:47%;animation-delay:5.16s;}
.location-brazil{top:63.7%;left:23%;animation-delay:5.31s;}
.location-indonesia{top:48.5%;right:16.7%;animation-delay:5.45s;}
.location-nicaragua{top:36.2%;left:12.05%;animation-delay:5.57s;}
.location-india{top:33%;left:67.35%;animation-delay:5.69s;}
.location-bangladesh{top:30%;left:72.9%;animation-delay:5.80s;}
.location-malaysia{top:45.3%;right:13%;animation-delay:3.22s;}
.location-yemen{top:36%;left:57.65%;animation-delay:5.90s;}
.location-dominican-republic{top:33%;left:17.65%;animation-delay:6.01s;}
.location-philipines-2{top:33%;right:11.5%; animation-delay:6.11s;}
.location-mexico{top:29.9%;left:6.55%;animation-delay:6.21s;}
.location-namibia{top:64%;left:46.9%;animation-delay:6.31s;}





@keyframes grow {
    0% {
        transform: scale(0);
    }

     40% {
        rotate: 5deg;
    }
    60% {
        transform: scale(1);
        rotate: -3deg;
    }
      75% {
        rotate: 2deg;
    }
    100% {
        rotate: 0deg;
        transform: scale(1);

    }
}




/* .feld {
    background: var(--offblack);
    background-color: #9c7a6968;
    position: relative;

    width: 85%;
    height: 6%;
    max-height: 0.3vw;
    border-radius: 1rem;

    animation: wave 5s infinite ease-in-out;


} */

#drive .services-text{
    width: 47%;
    height: 100%;
    /* padding-top: 3rem; */
    max-width: calc(70vh + 4rem);
    padding: 0;

}






/* __________________________________________________________________________________ */
/* ______________________________[[[  showcase  ]]]__________________________________ */
/* __________________________________________________________________________________ */


#showcase{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 250vh;
    min-height: 82.5rem;
    flex: 0 0 auto;
    position: relative;
    background-color: var(--offblack);
    flex: 0 0 auto;
    padding: 10vh 0;
}


.project-container{
    position: relative;
    width: 100vw;
    height: 75vh;
    max-width: 200vh;
    margin-bottom: 0.05vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.showcase-text-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50vh;
    width: 50%;
    overflow: hidden;
    max-width: 35rem;
    margin-left: 4vw;
    z-index: 1;
    position: relative;    



}


.showcase-text-box .ani-p{
    overflow: hidden;
    opacity: 1;
    height: 8rem;
    transition: height 0.3s ease-out, opacity 0.4s ease 0.4s;
}

#showcase-text-1,
#showcase-text-2,
#showcase-text-3{
    height:  5rem;
}

/* @media (max-width: 53rem) and (min-width: 51rem){
    #showcase-text-3{
        height:  6rem;
        background-color: green;
    }
} */







.display-none{
    height: 0rem!important;
    opacity: 0 !important;
    transition: height 0.3s ease-out 0.4s, opacity 0.4s ease !important;
}

@media (min-width: 52rem) {

    #showcase .button-container{
        justify-content: flex-start;
    }
}

#showcase .button{
    border: 0.1rem solid var(--offwhite);
    color: var(--offwhite);
}


#showcase .button:hover{
    border: 0.1rem solid var(--accent-color);
    color: var(--accent-color);
}


.display-image{
    position: absolute;
    width: 60vh;
    height: 60vh;
    aspect-ratio: 1/1;
    border-radius:37.5vh;
    right:  4vw;
    transition: all 0.3s ease-out;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: green;
}

/* .display-image::after {
    content: "";
    position: absolute;
    background-color: red;
    Background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 80%);
    width: 100%;
    height: 100%;
} */

#display-image-1{
    background-image: url(/images/opac/minze-2-wide-tiny.png);
}

#display-image-2{
    background-image: url(/images/rabot/mobile-rc-wide-tiny.png);
}

#display-image-3{
    background-image: url(/images/woc/drink-double-wide-tiny.png);
}

.image-wide2{
    width: 98%;
    height: 70%;
    max-width: none;
    border-radius: 1rem;
    right:  1%;
}

.image-wide{
    width: 98% !important;
    height: 94% !important;
    max-width: none;
    border-radius: 1rem !important;
    right:  1vw;
    transition: all 0.3s ease-out !important;
    

}

.display-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.2) 50%,
    transparent 75%);
  transition: all 0.1s ease;  /* weicher übergang */
  opacity: 0;
  border-radius: 1rem;

}

.display-image.image-wide::after {
    opacity: 1;
    transition: all 0.5s ease 0.3s;  /* weicher übergang */

}







/* __________________________________________________________________________________ */
/* ______________________________[[[  partners  ]]]__________________________________ */
/* __________________________________________________________________________________ */


#partners{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 93vh;
    min-height: 30.69rem;
    flex: 0 0 auto;
    position: relative;
    background-color: var(--offwhite);

}


.logo-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 Spalten für feine Steuerung */
    gap: 5%;
    height: 70%;
    width: 80%;
    max-width: 80vh;
    max-height: 70vw;
    align-items: center;
    justify-items: center;
    margin-top: 2.5rem;
}
  
.logo {
    width: 100%;
    height: 100%;
    max-height: 15vw;
    border-radius: 1vh;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;    
}
  
.logo:nth-child(1)  { 
    grid-column: 3 / span 2;
    /* background-image: url("images/trusted-logo-woc-bw-2.svg"); */

}


.logo:nth-child(2)  { 
    grid-column: 5 / span 2;
    /* background-image: url("images/trusted-logo-rc-2.svg"); */
}


.logo:nth-child(3)  { 
    grid-column: 7 / span 2; 
    /* background-image: url("images/trusted-logo-sankt-audio-3.svg"); */
}


.logo:nth-child(4)  { 
    grid-column: 2 / span 2; 
    /* background-image: url("images/trusted-logo-akryl-6.svg"); */

}


.logo:nth-child(5)  { 
    grid-column: 4 / span 2; 
    background-image: url("images/trusted-logo-elphie-3.svg");
}


.logo:nth-child(6)  { 
    grid-column: 6 / span 2; 
    background-image: url("images/trusted-logo-haw-2.svg");

}


.logo:nth-child(7)  { 
    grid-column: 8 / span 2; 
    /* background-image: url("images/trusted-logo-dhm-3.svg"); */

}
  

.logo:nth-child(8)  { 
    grid-column: 1 / span 2;
    background-image: url("images/trusted-logo-fairtified-9.svg");


}


.logo:nth-child(9)  { 
    grid-column: 3 / span 2; 
    background-image: url("images/trusted-logo-klimas-2.svg");

}


.logo:nth-child(10) { 
    grid-column: 5 / span 2;
    /* background-image: url("images/logos-vorlage-adobe-test6.svg"); */
    background-image: url("images/trusted-logo-woc-bw-2.svg");


}


.logo:nth-child(11) { 
    grid-column: 7 / span 2;
    background-image: url("images/trusted-logo-studio-playces.svg");


 }


.logo:nth-child(12) { 
    grid-column: 9 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test8.svg"); */
    background-image: url("images/trusted-logo-rc-2.svg");


}


.logo:nth-child(13) { 
    grid-column: 2 / span 2;
    /* background-image: url("images/logos-vorlage-adobe-test3.svg"); */
    
}


.logo:nth-child(14) { 
    grid-column: 4 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test4.svg"); */
        background-image: url("images/trusted-logo-sankt-audio-3.svg");

}


.logo:nth-child(15) { 
    grid-column: 6 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test5.svg"); */
    background-image: url("images/trusted-logo-akryl-6.svg");

}


.logo:nth-child(16) { 
    grid-column: 8 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test6.svg"); */
}


.logo:nth-child(17) { 
    grid-column: 3 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test7.svg"); */
}


.logo:nth-child(18) { 
    grid-column: 5 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test8.svg"); */
}


.logo:nth-child(19) { 
    grid-column: 7 / span 2; 
    /* background-image: url("images/logos-vorlage-adobe-test3.svg"); */
}
  





/* __________________________________________________________________________________ */
/* _______________________________[[[  contact  ]]]__________________________________ */
/* __________________________________________________________________________________ */


#contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: calc(60vh + 134px); */
    height: calc(40vh + 134px);
    min-height: calc(19.8rem + 134px);
    flex: 0 0 auto;
    position: relative;
    background-color: white;
    padding-top: 77px;

}

#contact h2 {
    font-size: clamp(3rem, 5.5vw, 5rem);
    margin: 0 10vw 2rem 10vw;
    max-width: min(94vw, 80rem);
    text-align: center;
}

/* __________________________________________________________________________________ */
/* _______________________________[[[  imprint  ]]]__________________________________ */
/* __________________________________________________________________________________ */


#villain{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    flex: 0 0 auto;
    position: relative;
    background: var(--Background-gradient);

}
  
.ocean2{
    height: 134px;
    width: 100%;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
    transform: rotate(180deg);
    overflow-x: hidden;

}

.villain-content-zeilen{
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    padding: 0 1rem;
}

.so-me-zeile{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 3rem;
    /* max-width: 45rem;
    width: 50%; */
    
}

.so-me-feld{
    width: 2rem;
    aspect-ratio: 1/1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 2rem;
}

.instagram{
    background-image: url("images/some-logo-black-instagram.svg");
}
.instagram:hover {
    background-image: url("images/some-logo-hover-instagram.svg");
}


.facebook{
    background-image: url("images/some-logo-black-facebook.svg");
}
.facebook:hover {
    background-image: url("images/some-logo-hover-facebook.svg");
}


.linkedin{
    background-image: url("images/some-logo-black-linkedin.svg");
}
.linkedin:hover {
    background-image: url("images/some-logo-hover-linkedin.svg");
}

.discord{
    background-image: url("images/some-logo-black-discord.svg");
}
.discord:hover {
    background-image: url("images/some-logo-hover-discord.svg");
}

.tiktok{
    background-image: url("images/some-logo-black-tiktok.svg");
}
.tiktok:hover {
    background-image: url("images/some-logo-hover-tiktok.svg");
}


.legal-zeile{
    height: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
}

#villain .menu-a{
    margin-top: 0;
    font-size: 1rem;
    min-width: 0;
}



/* __________________________________________________________________________________ */
/* __________________________________________________________________________________ */
/* __________________________________________________________________________________ */
/* _______________________________[[[  Responsive  ]]]_______________________________ */
/* __________________________________________________________________________________ */
/* __________________________________________________________________________________ */
/* __________________________________________________________________________________ */




/* ====================================================== */
/* ==================  D E S K T O P  =================== */
/* ====================================================== */
/* =============  min-h: 33rem & min-w:52  ============== */
/* ====================================================== */


/* =========================== */
/* =====      GLOBAL     ===== */
/* =========================== */


/* =========================== */
/* =====     kleiner     ===== */


@media (max-width: 75rem), (max-height: 45rem) {
    p, a, li {
        font-size: 1rem !important;
    }

    .button-container{
        height: 2.5rem;

    }
}


@media (max-height: 34rem) {

    h2 {
        font-size: clamp(2.5rem, 4.5vw, 8vh);
    }

    h3 {
        font-size: clamp(2rem, 3.5vw, 10vh);
    }

    p, a, li {
        font-size: 0.9rem !important;
    }

    .button-container{
        height: 1.8rem;
    }

    .button{
        height: 1.6rem;
        padding: 0 0.8rem ;
    }
}


@media (max-width: 70rem) and (max-height: 45rem) {
    
    p, a, li{
        font-size: 0.9rem !important;
    }
     
    
}




/* =========================== */
/* =========  HERO   ========= */
/* =========================== */

@media (max-aspect-ratio: 16/10) {
    .wave-main {
        background: url(elements/wave-tief.svg) repeat-x;
        height: 102px;
        width: 6400px;
    }

    .ocean {
        height: 102px;
    }

    @keyframes wave-main {
        0% { margin-left: -400px; }
        100% { margin-left: -2000px; }
    }
}



/* | bei schmal |_________________ */

@media (max-width: 92rem) {
    .hero-content-container p{
        margin: 0 5rem;
    }
}

@media (max-width: 80rem) {
    .hero-content-container p{
        margin: 0;
    }
}






/* =========================== */
/* ======   SERVICES    ====== */
/* =========================== */

/* ============================ */
/* =====     Schmaler     ===== */

@media (max-width: 85rem){


    .services-trio-container{
        padding: 0 3vw;
    }

    .services-content-container{
        padding: 0 3vw ;
    }
}

@media (max-width: 65rem){


    .services-trio-container{
        padding: 0;
    }
}


@media (max-width: 75rem) {
    .services-trio {
        height: 55vh;
        width: 55vh;
 
    }
}

@media (max-width: 61rem) {
    .services-trio {
        height: 47vh;
        width: 47vh;
    }
}



/* ================================== */
/* =====     bei sehr klein     ===== */

@media (max-width: 85rem) and (max-height: 45rem) {
    .services-trio {
        height: 60vh;
        width: 60vh;
    }

    .services-trio-container{
        padding: 0 4vw;
    }

    .services-content-container{
        padding: 0 8vw;
    }

    .services-main-text{
        padding-right: 45%;
    }

    .identity,
    .life,
    .scale {
        padding-right: 0;
        padding-left: 40%;
    }
}

@media (max-width: 70rem) and (max-height: 45rem) {

    .services-trio {
        height: 55vh;
        width: 55vh;
    }

    .services-trio-container{
        padding: 0 4vw;
    }

    .services-content-container{
        padding: 0 4vw;
    }

    .identity,
    .life,
    .scale {
        padding-right: 0;
        padding-left: 45%;
    }
 

}

@media (max-width: 60rem) and (max-height: 40rem) {

    .identity,
    .life,
    .scale {
        padding-left: 40%;
        margin-right: 0;
    }

    .services-trio-container{
        padding: 0;
    }

}

/* ================================= */
/* =====     breit & flach     ===== */

@media (min-aspect-ratio: 2/1) and (max-height: 50rem) and (min-height: 33rem){
    
    .services-trio-container{
        max-width: 250vh;
    }

    .services-content-container{
        max-width: 250vh;

    }

    h2 {
        font-size: clamp(2.5rem, 4.5vw, 8vh);
    }

    h3 {
        font-size: clamp(2rem, 3.5vw, 7vh);
    }
}


/* ================================= */
/* =====     schmal & hoch     ===== */

@media (max-aspect-ratio: 1/1) and (max-width: 68rem)
and (min-width: 52rem)
{
    
    .services-trio {
        height: 48vw;
        width: 48vw;
    }

    .button-container{
        height: 3.3rem;
    }


}



/* ============================ */
/* ======   Our Drive    ====== */
/* ============================ */

@media (max-width: 60rem){
    .drive-visual{
        min-width: 1rem;
        /* background-color: yellow; */
        max-width: calc(70vh + 2rem);
    }

    #drive .services-text{
        padding: 0 2vw;
    }

}

/* =========================== */
/* ======   SHOWCASE    ====== */
/* =========================== */



@media (max-width: 55rem){
    
    .showcase-text-box p{
        overflow: hidden;
        opacity: 1;
        height: 9rem;
        transition: height 0.3s ease-out, opacity 0.4s ease 0.4s;
    }


}

/* =========================== */
/* ======   Partners    ====== */
/* =========================== */

/* nichts zu tun */


/* =========================== */
/* ======    CONTACT    ====== */
/* =========================== */

@media (min-aspect-ratio: 2/1) and (max-height: 50rem){
    #contact h2 {
        max-width: 130vh;
        
    }
}

@media(max-height: 34rem){
    #contact h2 {
        max-width: 120vh;
        
    }
}






/* ====================================================== */
/* =================  Mobile-Horizontal  ================ */
/* ====================================================== */
/* ===================  max-h: 33rem  =================== */
/* ====================================================== */



@media (max-height: 33rem)  {

    /* ------------- Global  */

    /* p, a, h1, h2, h3, li{
        color: rgb(177, 79, 177) !important;
    } */

    h1{
        font-size: clamp(2rem, 6.15vw, 4.8rem);  /* soll das bleiben? */
    
    }

    h2 {
        font-size: clamp(2.5rem, 4.5vw, 2rem);
    }

    h3 {
        font-size: clamp(2rem, 3.5vw, 7vh);
    }

    .button-container{
        height: 2rem;
    }

    /* ------------- Hero  */
    .logo-box{
        height: 4.62rem;
        border-radius: 0 0 0.33rem 0.33rem;
    }

    .hero-content-container {
        max-width: 72.6rem;
        height: 6.6rem;

    }

    /* ------------- Services  */

    #services{
        padding-top: 3.3rem;
        padding-bottom: 3.3rem;
    }

    .services-trio-container{

        height: 90vh;
        max-height: 20rem;
        top: calc(20vh - 2rem);
        max-width: 72.6rem;
        align-items: center;
    }

    .trio-background-container{
        max-height: 19.8rem;
    }


    .services-trio{
        height: 90vh;
        width: 90vh;
        max-height: 19.8rem;
        max-width: 19.8rem;
    } 

    .services-content-container{
        margin-top: -18.81rem;
        margin-top: max(-90vh, -20rem);
        width: 90vw;
        min-width: 55rem;
    } 


    .services-text{
        height: 16.5rem;
    }

    .services-main-text{
        margin-bottom: 9.9rem;
    }



    /* ------------- Drive  */


    .drive-bg{
        padding: 0.165rem 2vw;
    }



    /* ------------- Showcase  */


    #showcase{
        padding-top: 3.3rem 0;
    
    }
    
    .project-container{
        height: 24.75rem;
        max-width: max(66rem, 200vh);
        margin-bottom: 0.0165rem;
    }
    
    
    .showcase-text-box{
        height: 16.6rem;
    }
    
    
    .display-image{
        width: 19.8rem;
        height: 19.8rem;
        border-radius:10rem;
    }
    
    
    /* ------------- partners  */


    .logo-grid {
        max-width: 26.4rem;
    }
      
    .logo {
        border-radius: 0.33rem;
    }





    /* ------------- contact  */


    #contact{
        height: calc(15rem + 134px);    
    }
      



    @media (min-aspect-ratio: 2/1) and (max-height: 50rem){
        #contact h2 {
            max-width: 42.9rem;
            
        }
    }
    
    @media(max-height: 34rem){
        #contact h2 {
            max-width: 39.6rem;
            
        }
    }








}





























/* ====================================================== */
/* =================  Mobile-Vertikal  ================== */
/* ====================================================== */
/* ===================  max-w: 52rem  =================== */
/* ====================================================== */


@media (max-width: 52rem) {

    /* ------------- Global  */
    /* p, a, h1, h2, h3{
        background-color: rgb(177, 175, 79) !important;
    } */


    

    /* ------------- Hero  */

    #hero{
        height: 100svh;
        min-height: 40rem;
    }

    .nav-blur{
        transition: all 0.3s ease-out 0.3s;
        height: 4rem;
        pointer-events: all;
    }

    .nav-blur.active{
        height: 100%;
        mask-image: none;
        background-color: rgba(255, 255, 255, 0.699);
        transition: all 0.3s ease-out;

    }

    .hero-nav{
        padding: 0 4vw;
    }

    .logo-box2{
        display: none;
    }

    .menu{
        flex-direction: column;
        margin: 0;
    }


    #hero .menu-a{
        opacity: 0;
        pointer-events: none;


    }

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 0.5rem;
        height: 3rem;
        width: 3rem;
        cursor: pointer;
        flex-shrink: 0;
        align-self: flex-end;
    }

    .burger-line {
        display: block;
        height: 10%;
        width: 100%;
        transform: translateY(0);
        transform-origin: center;
        transition: transform 0.3s ease 0.3s;
    }

    .burger-rotate {
        display: block;
        height: 100%;
        width: 100%;
        transform: rotate(0deg);
        transform-origin: center;
        transition: transform 0.3s ease 0s;
        background-color: var(--logo-color);
    }

    .burger-2 {
        background-color: var(--logo-color);
        transition: opacity 0.3s ease;
        opacity: 1;
    }

    /* === Aktivzustand (beim Öffnen) === */

    .burger.active .burger-line {
        transition: transform 0.3s ease 0s;
    }

    .burger.active .burger-rotate {
        transition: transform 0.3s ease 0.3s;
        background-color: var(--logo-color) !important;

    }

    .burger.active .burger-2 {
        opacity: 0;
    }

    .burger.active .burger-1 {
        transform: translateY(0.825rem);
    }
    .burger.active .burger-3 {
        transform: translateY(-0.825rem);
    }

    .burger.active .burger-1 .burger-rotate {
        transform: rotate(45deg);
    }

    .burger.active .burger-3 .burger-rotate {
        transform: rotate(-45deg);
    }

    .menu.active {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        height: 100%;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
        padding:  0 4vw 20vh 4vw;
        padding:  0 4vw 0vh 4vw;

    }

    #hero .menu-a.active{
        display: inline;
        opacity: 1;
        transition: opacity 0.5s ease 0.3s;
        font-size: clamp(3rem, 4.5vw, 5.5rem) !important;
        font-family: "rubik";
        pointer-events: all;
        min-width: 14rem;
        text-align: start;
        color: var(--logo-color) !important;
        margin-bottom: 2.5vh;

    }

    /* #hero .menu-a.lang{

        max-height: 3rem;
        max-width: 3rem;
        min-width: 0rem;
        border-radius: 50%;
        color: rgba(255, 0, 0, 0) !important;
        margin-top: auto;
        margin-bottom: 4rem;

    } */

    .burger.active{
        margin-bottom: 10vh;
    }






    #hero h1{
        text-align: left;
        max-width: 70vw !important;
        font-size: clamp(2rem, 13.5vw, 11vh);
        padding-top: 5vh;
    }

    #hero p{
        max-width: 70vw;
        width: 100%;
    }

    .hero-content-container {
        width: min(90vw, 58.5vh);
        max-width: 70vw;
        text-align: left;
    }

    


    





    /* ------------- Services  */


    #services{
        padding-top: 4rem;
        height: calc(321svh + 4rem);
        min-height:132.1rem; /* 128rem + 4rem + 0.1rem */
        padding-bottom: 1rem;
    }

    #services .section-title{
        z-index: 3;
    }

    
    .services-trio-container{
        justify-content: center;
        width: 100%;
        top: 3rem;
        flex-wrap: wrap;
        z-index: 2;
        height: 40svh;
        max-height: 100vw;
        max-width: 100vw;

    }
    
    #services h2, #services h3,
    #showcase h2, #showcase h3,
    #drive h2, #drive h3 {
        width: 100%;
        max-width: none !important;
    }

    #services h3{
        margin-bottom: 0.3rem;

    }




    .services-trio-container::after{
        background-color: rgb(255, 255, 255);
        display: block;
        content: "";
        width: 100%;
        flex: 0 0 100%;
        mask-image: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 96%, rgba(255, 255, 255, 0) 100%);
        position: absolute;
        height: calc(40svh + 5.2rem);
        max-height: calc(100vw + 5.2rem);
        z-index: -1;
        margin-top: -4rem;
    }

    .trio-schubser{
        display: none;
    }

    .trio-background-container{
        height:fit-content;
        aspect-ratio: 1/1;
        margin-top: 0;
        overflow-x: hidden;

    }

    .services-trio-background{
        border-radius: 5rem;
        rotate: 210deg;
        height: fit-content;
        aspect-ratio: 1/1;
        max-width: none;
        max-height:none;
    }

    .rotate-compensator{
        rotate: -210deg;
    }

    .services-trio{
        height: 40svh;
        width: 40svh;
        max-height: 100vw;
        max-width: 100vw;

    }

    .services-content-container{
        margin-top: 0;
        width: 100%;
        overflow: visible;
    }

    .services-text {
        padding-right: 2rem;
        padding-left: 2rem;
        max-width: 100%;
        justify-content: flex-start;
        overflow: visible;
        height: 70svh;
        min-height: 28rem;
        margin: 0;
        margin-bottom: 0.1rem;
        flex: 0 0 auto;
        padding-bottom: 3rem;
    }

    .services-main-text{
        margin-top: 0;
    }

    #services .mobile-sticky{
        width: 100%;
        max-width: 100%;
        position: -webkit-sticky;
        position: sticky;
        margin-top: 1rem;
        top: min(40svh + 4rem, 100vw + 4rem);
        z-index: 1;
        
    }

    #services .button-container{

    height: 3.5rem;

    }


    /* verschachtelte bedingung */
    @media (max-width: 30rem) {

        .services-text{
            padding-right: 1rem;
            padding-left: 1rem;
        }  
        
    }

    @media (max-width: 25rem) {

        .services-text{
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }

        .mobile-sticky{
            overflow: hidden;
            justify-content: flex-start;

        }

        #contact h2 {
            max-width: none !important;
            margin-left: 0;
            margin-right: 0;
        }

    }

    @media (max-width: 20rem) {

        #services .services-text{
            padding-right: 0rem;
            padding-left: 0rem;
            padding-bottom: 0;

        }

        #services .button-container{
            height: fit-content;
            margin-bottom: 0;
        }

        .mobile-sticky{
            overflow: hidden;
            justify-content: flex-start;

        }
    }






    /* ------------- Drive  */

    #drive{
        height: 130svh;
        min-height: 52rem;
    }

    .drive-bg{
        width: 96%;
        flex-direction: column;
    }

    #drive .services-text{
        width: 100%;
        height: 65%;
        padding-top: 1rem;

    }

    .raster{
        width: 94%;
        max-height: 45%;
    }

    .drive-visual{
        max-height: 100%;
    }

    #drive p{
        margin-bottom: 0.3rem;
    }



    @media (max-width: 20rem) {

        #drive .button-container{
            margin-top: 0;
        }

        #drive p{
            margin-bottom: 0;
        }

        .raster{
            max-height: 94vw;
        }

        .drive-bg{
            justify-content: flex-start;
        }



    }





    /* ------------- Showcase  */

    #showcase{
        height: 275svh;
        min-height: 110rem;
    }

    

    .project-container{
        justify-content: flex-end;
        align-items: center;
        /* background-color: rgba(255, 0, 0, 0.415); */
        height: 85svh;
        min-height: 34rem;
        flex-direction: column;
    }

    /* .non-reverse{
        flex-direction: column;
        padding-bottom: 1rem;

    } */



    .display-image{
        width: 30svh;
        height: 30svh;
        max-width: 96vw;
        right:  auto;
        top: 15svh;
        background-position: top center;



    }

    /* für column und untereinander */
    .image-wide{
        height: 94% !important;
        top: 3%;
      
    }


    .display-image::after {

        background: linear-gradient(to top,
            rgba(0, 0, 0, 0.424) 20%,
            transparent 70%)
        ;

    }


    #display-image-1{
        background-image: url(/images/opac/minze-1-hoch-tiny.png);
    }

    #display-image-2{
        background-image: url(/images/rabot/mobile-rc-hoch-tiny.png);
    }

    #display-image-3{
        background-image: url(/images/woc/drink-double-high-tiny.png);
    }


    .showcase-text-box{
        height: fit-content;
        width: 90%;
        margin: 5%;
        margin-bottom: 5svh;
        transition: margin-bottom 0.3s ease ; /* smooth bewegen */

    }

    /* @media (max-width: 34rem){
        .showcase-text-box{
            margin-bottom: 10svh;
        }
    }

    @media (max-width: 28.7rem){
        .showcase-text-box{
            margin-bottom: 15svh;
        }
    } */


    .text-is-hidden{
        margin-bottom: 23svh;
        transition: margin-bottom 0.3s ease 0.3s; /* smooth bewegen */
    }

    /* #showcase-text-1{height:  fit-content;} */

    @media (max-width: 28.7rem){ #showcase-text-1, #showcase-text-2, #showcase-text-3{height:  6.5rem;}}
    @media (max-width: 22.5rem){ #showcase-text-1, #showcase-text-2, #showcase-text-3{height:  8.3rem;}}
    @media (max-width: 18.5rem){ #showcase-text-1, #showcase-text-2, #showcase-text-3{height:  9rem;}}


/* #showcase-text-3{height: 5rem;}

    @media (max-width: 35rem){ #showcase-text-3{height:  6.5rem;}}
    @media (max-width: 27.3rem){ #showcase-text-3{height:  8.3rem;;}}
    @media (max-width: 21.5rem){ #showcase-text-3{height:  9rem;}} */





    /* .showcase-text-box p{
        display: none;

    } */

    .showcase-text-box h2{
        text-align: center;
        text-wrap: nowrap;
        height: fit-content;
   


    }

    @media (max-width: 27.5rem) {

        .showcase-text-box h2{
             font-size: clamp(2.5rem, 5vw, 8vh);
             min-width: none;
            text-wrap: wrap;

        }


        
    }



    


    






  
    /* ------------- Partners  */

    #partners{
    height: 85vh;
    max-height: 100vw;
    min-height: 34rem;
    }


    /* ------------- contact  */

    #contact{
        max-height: 150vw;
    }


        @media (max-width: 29rem) {

        #contact h2{
            /* text-align: left; */
            max-width: 94vw !important;
        }

    }


    /* ------------- Partners  */


    .villain-content-zeilen{

        width: 90%;
        max-width: 30rem;
        padding: 0;
        justify-content: space-evenly;
    }

    .so-me-zeile{
        margin-top: 60px;
        margin-bottom: 3rem;

    }

    .so-me-feld{
        margin: 0 0;
        max-height: 7vw !important;

    }


    .legal-zeile{
        justify-content: center;
        margin-bottom: 2rem;


    }

    #villain .menu-a{
        margin-top: 0;
        font-size: 0.9rem !important;
        min-width: 0;
    }
















}


/* ====================================================== */
/* ===================  Mini Mobile  ==================== */
/* ====================================================== */
/* ===================  max-w: 52rem  =================== */
/* ====================================================== */

/* @media (max-width: 52rem) and (max-height: 33rem){
      p, a, li, h1, h2, h3{
        background-color: rgb(79, 162, 177) !important;
    }

    .services-content-container{
        min-width: 1vw !important;  ((sonst kann man nach rechts scrollen))
    } 
} */