* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}



/* Variables------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------*/




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

body {  
    margin: 0;
    padding: 0;
    background: #182027;
    background: linear-gradient(90deg, #182027 0%, #22374a 50%, #182027 100%, #22374a 182027%);
    height: 100dvh;
    overflow: hidden;
}



/* NAVIGATION-------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */


.primary-header {
    display: flex;
    position: fixed;
    width: 100dvw;
    text-align: center;
    justify-content:space-between;
    align-items: center;    
    background-color: var(--col-nav_transparent);
    color: white;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);

    height: 70px;
    z-index: 9000;
}
.primary-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,transparent, rgba(255, 255, 255, 0.546), transparent );
    transition: 500ms;
}
.primary-header:hover::after {
    left: 100%;
}
.logo {
    margin-top: 15px;
    transform: scale(0.7);   
    align-items: center; 
}
.primary-navigation {
    margin-right: 5dvw;
}
.primary-navigation ul{
    display: flex;
    position: relative;
    align-items: center;
    z-index: 9200;   
}
.primary-navigation li {
    list-style: none;      
}
.primary-navigation li a {
    text-decoration: none;
    color: white;
    font-family: 'Proxima Nova Rg', sans-serif;
    font-size: var(--fs-nav);
    margin-right: 1.3rem;
    padding: 0.3rem; /*hoverfix*/
    z-index: 9300;
    transition: 500ms ease;  
}
.primary-navigation li a::after {   
    content:'';
    position: absolute;
    background: rgb(251,138,1);
    display: block;
    width: 2px;
    height: 20px;
    transform: translateY(-210%);
    margin-left: -0.9rem;    
}
.primary-navigation li a:hover {
    background-color: var(--col-dark);
    text-shadow: black 3px 3px 10px;
    color: var(--col-sig);
}
.language {
    margin-top: 0.2rem;
    margin-left: 1rem;
}
.language::after {   
    content:'';
    position: absolute;
    background: rgb(251,138,1);
    display: block;
    width: 2px;
    height: 20px;
    transform: translateY(-215%);
    margin-left: -1.8rem;   
}
.hamburger {
    display: none;
    position: relative;
    cursor: pointer;
    margin-right: 2dvw;
}
.bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px auto;
    --webkit-transition: all 300ms ease-in-out;
    background-color: var(--col-sig);
}




@media(max-width:770px){
    .hamburger{
        display: block;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
   .primary-header {
        background-color: var(--col-dark);
        backdrop-filter: none;
        }
    .primary-header::after {
        display: none;
    }

 
  

    .primary-navigation ul {
        position: fixed;
        left: 0%;
        top: 70px;
        gap: 0;
        flex-direction: column;
        background-color: var(--col-nav);
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        width: 100dvw;
        text-align: center;
        transform-origin: top;
        transition: 00ms;
        transform: scale(1, 0);
    }
    
    .primary-navigation li {
        margin: 0 0;
        width: 100%;
    }

    .primary-navigation li a {
        margin-right: 0rem;    
    }


    .primary-navigation li a::after{
        content:'';
        position: absolute;
        background: rgb(251,138,1);
        display: block;
        width: 30dvw;
        height: 2px;
        right: 0;
        transform: translateX(-35dvw);
        margin-left: 0;   
    }

    .primary-navigation ul.active {
        left: 0;
        top: 70px;
        transform: scale(1 , 1);
        background-color: var(--col-nav);
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        transition: 300ms;
    }

    .language {
        margin-top: 0.2rem;
        margin-left: 0rem;
    }

    .language::after {   
        content:'';
        position: absolute;
        background: rgb(251,138,1);
        display: block;
        width: 94dvw;
        height: 4px;
        transform: translateX(-50%);
        margin-left: 2dvw;   
    }
}










/* NAVEND-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/




/* galeriestart-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/






.banner {
    display: grid;
    position: relative;   
    grid-template-columns: 45dvw 13dvw 40dvw;
    grid-template-rows: 18dvh 22dvh 9dvh 1dvh 9dvh 4dvh auto 5dvh;
    gap: 0rem;
    max-height: 100dvh;
    margin: 0px;
    padding: 0px;
    background: url("/images/Galerie/Screens/s_gv.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: 0.5s;   
}

.content {
    position: relative;
    display: block;
    grid-column: 1 ;
    grid-row: 2;
    visibility: hidden;
    transform: scale(0); 
    transition: 300ms;
    filter: blur(1rem);   
}

.content.active {
    visibility: visible;
    transform: scale(1);
    transition: 600ms;
    filter: blur(0rem);   
}

        .con_title { 
        position: relative;
        display: grid;
        font-family: 'Proxima Nova Rg', sans-serif;   
        text-align: left;
        font-weight: 800;
        line-height: 0.9;
        visibility: hidden;  
        font-size: var(--fs-xl);
        color: #ffffff;
        margin-bottom: 1rem;
        margin-left: 4dvw;
        }

        
        .con_title.active { 
        visibility: visible;
        overflow: hidden;
        white-space: nowrap;
        animation: 
        typing 1500ms steps(20, end) alternate;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 600ms;
        width: 0%;
        }
         @keyframes typing {
            from { width: 0% }
            to { width: 100% }
        }

        .con_title.active::before  {
            content:'';
            background: rgb(251,138,1);
            display: block;
            width: 2rem;
            height: 2rem;
            margin-bottom:  0.5rem;
            border-radius: 0.5rem;
        } 

        .con_infotext{ 
            display: grid;
            height: 5dvh;
            font-family: 'Proxnorm', sans-serif; 
            text-align: left;
            font-weight: 400;
            line-height: 0.9;
            font-size: 1rem;
            color: #ffffff;
            margin-left: 4dvw;
            margin-top: 1dvh;
        }

        .con_infotext.active { 
            visibility: visible;
            margin-left: 4dvw;
            overflow: hidden;
            white-space: nowrap;
            animation: 
            typing_info 1200ms steps(20, end) alternate;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
            animation-delay: 1300ms;
            width: 0%;
            }
            @keyframes typing_info {
            from { width: 0% }
            to { width: 100% }
            }

            .con_infotext.active span {

            font-size: var(--fs-400);
            }
            
            .con_infotext.active span i {
                background: var(--col-sig);
                font-size: var(--fs-400);
                padding: 0.5rem 1rem;
                margin-left: 1rem;
                margin-right: 1rem;
                display: inline-block;
                border-radius: 5px;
                color: #000000;
                
 }
                


/* galerieselection-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------*/




.subgalerie {  
    position: relative;
    display: grid;
    grid-column: 3;
    grid-row: 3 / 5;
    grid-template-rows: 10dvh 1dvh 10dvh;
    font-size: 0;
    text-align: right;
    padding: 0; 
    visibility: hidden;  
    transform: translateX(200%);
    transition: 1500ms;  
    z-index: 1;  
    animation-timing-function: cubic-bezier(0.03, 0.34, 0.5, 1);    
}


.subgalerie.active {
    position: relative;
    display: grid;
    grid-column: 3;
    grid-row: 3 / 5;
    grid-template-rows: 10dvh 1dvh 10dvh;
    font-size: 0;
    text-align: right;
    padding: 0; 
    visibility: visible;
    transform: scale(1);
    z-index: 10; 
}




    .smvideoline {
    grid-row: 1;
    display: inline; 
    font-size: 0;
    text-align: right;
    align-self: flex-end
        }

        .smvideo{
        position: relative;
        grid-row: 1;
        width: 6dvw;
        filter: saturate(10%);
        opacity: 100%;
        transition: 500ms;
        z-index: 1; 
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
        border-radius: 0.7dvh;  
            }
    
            .smvideo:hover {
            position: relative;
            grid-row: 1;
            filter: saturate(100%);
            transform: scale(1.65);
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);    
            z-index: 5000;
            }

         .morv { 
            display: grid;
            font-family: 'Proxnorm', sans-serif; 
            text-align: right;
            font-weight: 400;
            line-height: 0.9;
            font-size: var(--fs-400);
            color: #ffffff;
            margin-top: 0.5dvh;
            margin-bottom: 0.5dvh;
            }

        .smdivider {
            grid-row: 2;
            font-size: 0;
            height: 0.4dvh;
            background: rgba(251,138,1,1);
            width: 36dvw;
            transform: translateX(4dvw);
            }   


        .smimageline{
            grid-row: 3;
            display: inline; 
            font-size: 0;
            text-align: right;
            }

            .mori { 
            display: grid;
            font-family: 'Proxnorm', sans-serif; 
            text-align: right;
            font-weight: 400;
            line-height: 0.9;
            font-size: var(--fs-400);
            color: #ffffff;
            }

            .smimage{
            position: relative;
            z-index: 10; 
            grid-row: 3;
            width: 6dvw;
            filter: saturate(30%);
            opacity: 100%; 
            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); 
            font-size: 0; 
            transition: 500ms;
            margin-top: 0.5dvh;
            border-radius: 0.7dvh;
            -webkit-text-stroke-color: #182027;
            -webkit-text-stroke-width: 2px;   
            }

            .smimage:hover{ 
            position: relative; 
            z-index: 1000; 
            filter: saturate(100%);
            transform: scale(1.65);
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
          
            }
            .screenadd {
                grid-row: 1;
                position: absolute;
                display: grid;
                width: 25dvw;
                z-index: 500;
                self-align: left;
                transform: translateY(-20dvh);
                margin: 10dvw

            }


 @media (max-width: 1100px) {
    .banner {  
            grid-template-columns: 100%;
             grid-template-rows: 12dvh 33dvh 12dvh 1dvh 12dvh 1dvh 28dvh 1dvh;      
            }
    .subgalerie {  
            grid-column: 1;
            grid-row: 3 / 5;
            }
    .subgalerie.active {  
            grid-column: 1;
            grid-row: 3 / 5;
            }

    .smvideoline{
             margin-right: 4dvw;
             }
        .smvideo{  
             width: clamp(100px, 15dvw, 15dvw);           
            }
    .smdivider{
            width: 94dvw;
             transform: translateX(3dvw);
            }
     .smimageline{
             margin-right: 4dvw;
            }
        .smimage{              
            width: clamp(100px, 15dvw, 15dvw);           
            }
    } 
   
    
@media (max-width:770px){
    .banner {
            grid-template-rows: 12dvh 39dvh 9dvh 1dvh 9dvh 1dvh 28dvh 1dvh;
            }

    .banner:before {
            content:'';
            position: absolute;
            background: rgba(112, 107, 124, 0.2);
            backdrop-filter: blur(0px);
            width: 100%;
            height: 100%;
            }
            
    .text-light {
            color: white;
            transition: 500ms;
             }   
    .smimageline{
            text-align: center;
             }  
    .smvideoline{
             text-align: center;
            }   
    .morv 
            {
            text-align: center;
            } 
    .mori   {
            text-align: center;
            }  
 }


 @media (max-width:660px){
    .banner {
        height: 100dvh;
        min-height: 1000px;
        grid-template-rows: 13dvh 25dvh 11dvh 1dvh 17dvh 1dvh 28dvh 4dvh;
        background-position: 60% 40%;
        background-size: cover;
    }}


    /*-----------CAROUSEL----------------------------------------------*/

    
.banner .carousel-box {
    position: relative;
    width: 36dvw;
    min-width: 350px;
    height: 35dvh;
    max-height: 430px;
    grid-column: 3;
    grid-row: 7;
    align-self: right;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    margin-left: 4dvw;
}

.carousel {
    position: relative;
    height: 35dvh;
    min-height: 250px;
    perspective: 2000;
    perspective-origin: 50% 50%;
    object-fit: cover;
    object-position: center;
}

.carousel .carousel-item {
    width: 9dvw;
    min-width: 150px;
    cursor: pointer;   
}

.carousel .carousel-item img {
    max-width: 10dvw;
    min-width: 150px;
    border-radius: 10px;
    object-fit: cover;
    object-position: center;
    transform:  translateX(1px) translateY(-22%);   
}


@media (max-width: 1100px) {
    .banner .carousel-box{  
        display: flex;
        grid-column: 1;
        margin-left: 4dvw;
        margin-right: 4dvw;
        width: 92dvw; 
        height: 28dvh;
        max-height: 300px;          
    }
    .carousel .carousel-item{  
        min-width: 130px; 
    }
    .carousel .carousel-item img {
        min-width: 130px;
        border-radius: 5px;
        transform:  translateX(0px) translateY(0%);   
    }       
}
@media (min-width: 1101px) {
    .carousel .carousel-item img {
        min-width: 130px;
        border-radius: 5px;
        transform:  translateX(0px) translateY(-14%);   
    }       
}
@media (min-width: 1950px) {
    .carousel .carousel-item img {
        min-width: 130px;
        border-radius: 5px;
        transform:  translateX(0px) translateY(-18%);   
    }       
}
@media (min-width: 2600px) {
    .carousel .carousel-item img {
        min-width: 130px;
        border-radius: 5px;
        transform:  translateX(0px) translateY(-25%);   
    }       
}


/*-----------------Videoplayer---------------------------------------------*/



.video-player {
    width: clamp(650px, 70%, 1440px);
    overflow: hidden;
    position: absolute;
    z-index: 9900;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    background-color: rgb(251,138,1);
    box-shadow: 0px 0px 15dvw rgba(0, 0, 0, 0.9);
}

video:focus {
    outline: none;  
}

.close-btnb {
    position: absolute;
    top: 10px;;
    right: 10px;
    width: 30px;
    cursor: pointer;

}


/* galerieend-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*/