/* -------------------------------------------- */
/* VB Tech: Website */
/* Version: 3 */
/* -------------------------------------------- */
/* Created by twotribes.de */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Actor arrangement on pages */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !STAGE: General layout */
/* -------------------------------------------- */

.tt-eins .actor,
.tt-eins .ensemble, 
.tt-eins .lift {
	position: relative;
}

/* !--- General containers */
.stage {
    background-color: var(--backcolor-page);
	font: var(--textset-m);
	color: var(--textcolor-standard);
    width: var(--site-width-bleed);
    margin: 0 auto 0 0;
}

/* Major ensembles */
#ensemble_head {
    width: 100%;
}

#ensemble_main {
    width: var(--site-width);
    padding-left: calc(var(--desktop-viewport-margin) + var(--width-3col-plus) + var(--desktop-gutter));
}

.stage:not(.stage-home) #ensemble_main {
    margin-top: -50px;
    padding-bottom: 48px;
}

#ensemble_foot {
    width: var(--site-width);
    margin: 32px 0 0 0;
    padding-left: var(--desktop-viewport-margin);
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #ensemble_head {
        margin-bottom: 24px;
    }
    
    #ensemble_main {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
    
    .stage:not(.stage-home) #ensemble_main {
        margin-top: 32px;
    }

    #ensemble_foot {
        margin-top: 24px;
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
}


/* -------------------------------------------- */
/* !STAGE: Homepage */
/* -------------------------------------------- */

/* !--- Grand containers */
.stage-home #ensemble_main {
    --navigation-negative-distance: 80px;
    
    padding-left: calc(var(--desktop-viewport-margin) + var(--width-1col-plus));
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-home #ensemble_main {
        --navigation-negative-distance: 16px;
        
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
    }
}


/* !--- 2-column layout for main content */
.stage-home #actor_home {
    --inset-left: var(--width-5col);
    margin-top: calc(-1 * var(--navigation-negative-distance));
}

.stage-home #actor_home .home-intro {
    padding: 32px 0 32px var(--inset-left);
    display: grid;
    grid-template-columns: var(--width-5col-plus) var(--width-6col);
    column-gap: var(--width-1col-plus);
}

.stage-home #actor_home .home-content {
    padding: 32px 0 40px  var(--inset-left);
    display: grid;
    grid-template-columns: var(--width-5col-plus) var(--width-6col);
    column-gap: var(--width-1col-plus);
}

/* Logo footer */
.stage-home #actor_associations {
    padding-left: var(--width-1col-plus);
    padding-bottom: 32px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-home #actor_home .home-intro {
        display: block;
        padding-left: 0;
    }
    
    .stage-home #actor_home .home-content {
        grid-template-columns: 1fr;
        padding-left: 0;
    }
    
    .stage-home #actor_associations {
        padding-left: 0;
        padding-bottom: 48px;
    }
}


/* -------------------------------------------- */
/* !STAGE: Software */
/* -------------------------------------------- */

.stage-software #ensemble_main {
    display: grid;
    grid-template-columns: var(--width-8col) var(--width-5col);
    column-gap: var(--width-2col);
}

.stage-software #actor_product {
}

.stage-software #actor_screens {
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-software #ensemble_main {
        display: block;
    }
}


/* -------------------------------------------- */
/* !STAGE: News */
/* -------------------------------------------- */

.stage-news #actor_news {
    width: var(--width-15col);
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-news #actor_news {
        width: 100%;
    }
}


/* -------------------------------------------- */
/* !STAGE: Science */
/* -------------------------------------------- */

.stage-science #ensemble_main {
    display: grid;
    grid-template-columns: var(--width-8col) var(--width-6col);
    column-gap: var(--width-2col);
}

.stage-science #actor_science {
}

.stage-science #actor_publications {
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-science #ensemble_main {
        display: block;
    }
    
    .stage-science #actor_publications {
        margin-top: 48px;
    }
}


/* -------------------------------------------- */
/* !STAGE: Team */
/* -------------------------------------------- */

.stage-team #actor_company {
    display: grid;
    grid-template-columns: var(--width-5col) var(--width-9col);
    column-gap: var(--width-1col-plus);
}

.stage-team #actor_team {
    margin-top: 48px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-team #actor_company {
        display: block;
    }
    
    .stage-team #actor_team {
    }
}


/* -------------------------------------------- */
/* !STAGE: Contact */
/* -------------------------------------------- */

.stage-contact #actor_contact {
    width: var(--width-15col);
    display: grid;
    grid-template-columns: var(--width-5col) var(--width-5col) var(--width-3col);
    column-gap: var(--desktop-gutter);
    row-gap: var(--desktop-gutter);
}

.stage-contact #actor_privacy {
    width: var(--width-10col);
    margin-top: 64px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .stage-contact #actor_contact {
        display: block;
        width: 100%;
    }
    
    .stage-contact #actor_privacy {
        width: 100%;
    }
}


/* -------------------------------------------- */
/* !STAGE COMPONENT: Active overlay */
/* -------------------------------------------- */

/* !--- Initialize overlay wrappers */
.stage #ensemble_overlay {
    display: none;
}


/* !--- Disguise + block underground stage */
.stage.overlay-active {
    overflow: hidden;
    height: 100%;
}

.stage.overlay-active #ensemble_head > *, 
.stage.overlay-active #ensemble_main > *, 
.stage.overlay-active #ensemble_foot > * {
    filter: blur(5px);
}


/* !--- Dimming overlay container */
/* Visibility is controlled by JS */
.stage.overlay-active #ensemble_overlay {
    display: block;
    border: none;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    padding: var(--desktop-gutter);
    margin: 0;
    z-index: 100;
    background-color: var(--backcolor-underlay);
}

@media only screen and (max-width: 864px) {
    .stage.overlay-active #ensemble_overlay {
        padding: var(--mobile-gutter);
    }
}


/* !--- Actual overlay */
#ensemble_overlay .actor {
    top: 50%;
    inset-inline-start: 50%;
    max-width: var(--site-width);
    transform: translateX(-50%) translateY(-50%);
    box-shadow: var(--shadow-overlay);
}