/* -------------------------------------------- */
/* VB Tech: Website */
/* Version: 2 */
/* -------------------------------------------- */
/* Created by twotribes.de */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Unique actors */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* !ACTOR: Main navigation */
/* -------------------------------------------- */

/* !--- General containers */
#actor_navigation {
    display: flex;
    flex-wrap: wrap;
}


/* !--- Navigation backgrounds */
/* Master background */
#actor_navigation .nav-back.back-top {
    --container-width: 1320px;
    --container-height: 67px;
    --angle-inset: 31px;

    background: var(--vbt-thunder-ultradark) center no-repeat;
    background-size: cover;
    width: var(--container-width);
    height: var(--container-height);
    clip-path: polygon(0 0, 100% 0%, calc(var(--container-width) - var(--angle-inset)) 100%, 0% 100%);
}

#actor_navigation.expression-home .nav-back.back-top {
    --angle-inset: 119px;
    --container-height: 220px;
}

/* Secondary triangle */
#actor_navigation .nav-back.back-bottom {
    --container-width: 179px;
    --container-height: 322px;
    --angle-inset: var(--container-width);
    
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--vbt-thunder-ultradark) center no-repeat;
    background-size: cover;
    width: var(--container-width);
    height: var(--container-height);
    clip-path: polygon(0 0, 100% 0%, calc(var(--container-width) - var(--angle-inset)) 100%, 0% 100%);
}

#actor_navigation.expression-home .nav-back.back-bottom {
    display: none;
}

/* Layout: small viewports */
@media only screen and (max-width: 1320px) {
    /* Master background */
    #actor_navigation .nav-back.back-top {
        --container-width: 100%;
        --container-height: 23px;
        --angle-inset: 0;
    }
    
    #actor_navigation.expression-home .nav-back.back-top {
        --container-width: 100%;
        --container-height: 126px;
        --angle-inset: 0;
    }
    
    /* Secondary triangle */
    #actor_navigation .nav-back.back-bottom {
        --container-width: 60px;
        --container-height: 16px;
        --angle-inset: 9px;
    }
    
    #actor_navigation.expression-home .nav-back.back-bottom {
        display: block;
        top: calc(126px + 76px);
        --container-width: 142px;
        --container-height: 79px;
        --angle-inset: 42px;
    }
}

/* Section specific images: desktop viewports */
@media only screen and (min-width: 1320px) {
    .stage-home #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_home_top.jpg");
    }

    .stage-software #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_software_top.jpg");
    }
    .stage-software #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_software_bottom.jpg");
    }
    
    .stage-news #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_news_top.jpg");
    }
    .stage-news #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_news_bottom.jpg");
    }
    
    .stage-science #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_science_top.jpg");
    }
    .stage-science #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_science_bottom.jpg");
    }

    .stage-team #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_team_top.jpg");
    }
    .stage-team #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_team_bottom.jpg");
    }

    .stage-contact #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_contact_top.jpg");
    }
    .stage-contact #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_contact_bottom.jpg");
    }
}

/* Section specific images: small viewports */
@media only screen and (max-width: 1320px) {
    .stage-home #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_home_mobile_top.jpg");
    }
    .stage-home #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_home_mobile_bottom.jpg");
    }
    
    .stage-software #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_software_mobile_top.jpg");
    }
    .stage-software #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_software_mobile_bottom.jpg");
    }
    
    .stage-news #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_news_mobile_top.jpg");
    }
    .stage-news #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_news_mobile_bottom.jpg");
    }
    
    .stage-science #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_science_mobile_top.jpg");
    }
    .stage-science #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_science_mobile_bottom.jpg");
    }
    
    .stage-team #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_team_mobile_top.jpg");
    }
    .stage-team #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_team_mobile_bottom.jpg");
    }
    
    .stage-contact #actor_navigation .nav-back.back-top {
        background-image: url("./img/backgrounds/navback_contact_mobile_top.jpg");
    }
    .stage-contact #actor_navigation .nav-back.back-bottom {
        background-image: url("./img/backgrounds/navback_contact_mobile_bottom.jpg");
    }
}


/* !--- Logo & home link */
#actor_navigation .nav-logo {
    --container-width: 252px;
    --container-height: 132px;
    --angle-inset: 73px;
    
    background: #fff right top url("./img/icons/signature_angle_page.svg") no-repeat;
    width: var(--container-width);
    height: var(--container-height);
    clip-path: polygon(0 0, 100% 0%, calc(var(--container-width) - var(--angle-inset)) 100%, 0% 100%);
    transition: var(--transition-color);
}

#actor_navigation.expression-home .nav-logo {
    --container-width: 390px;
    
    background-image: url("./img/icons/signature_angle_home.svg")
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_navigation .nav-logo {
        --container-width: 85px;
        --container-height: 45px;
        --angle-inset: 23px;
        
        background-size: 31px;
    }
    
    #actor_navigation.expression-home .nav-logo {
        --container-width: 184px;
        --container-height: 76px;
        --angle-inset: 42px;
                
        background-size: 50px;
    }
}

/* Link container & image */
#actor_navigation .nav-logo .home-action {
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    #actor_navigation .nav-logo:has(.home-action:hover) {
        background-color: var(--vbt-thunder-ultralight);
        transition: var(--transition-color);
    }
}

#actor_navigation.expression-home .nav-logo, 
#actor_navigation .nav-logo .home-action {
    display: flex;
    align-items: center;
    justify-content: center;
}

#actor_navigation .nav-logo img {
    margin-left: -70px;
}

#actor_navigation.expression-home .nav-logo img {
    margin-left: -44px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_navigation .nav-logo img {
        width: 25px;
        margin-left: -27px;
    }
    
    #actor_navigation.expression-home .nav-logo img {
        width: 95px;
        margin-left: -45px;
    }
}


/* !--- Section links */
#actor_navigation .nav-menu {
    --button-height: 40px;
    --angle-inset: 27px;
    
    flex-grow: 1;
    display: flex;
    position: relative;
    height: calc(var(--button-height) + 2 * 4px);
    padding: 4px 8px 4px 24px;
    margin: -16px 0 0 -18px;
    background-color: var(--backcolor-page);
    clip-path: polygon(var(--angle-inset) 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
}

#actor_navigation .nav-menu .menu-item {
    --angle-inset: 23px;

    height: var(--button-height);
    width: 178px;
    margin-left: -16px;
    clip-path: polygon(var(--angle-inset) 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
}

.stage:not(.stage-home) #actor_navigation .nav-menu .menu-item {
    width: 218px;
}

#actor_navigation .nav-menu .menu-item.item-mobile {
    display: none;
}

#actor_navigation .nav-menu .menu-item .menu-action {
    line-height: var(--button-height);
    text-align: center;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    /* Inside pages: only active item visible */
    #actor_navigation .nav-menu {
        --button-height: 30px;
        --angle-inset: 21px;

        margin-top: -9px;
        margin-left: -16px;
        padding-left: 20px;
    }
    
    #actor_navigation:not(.expression-home) .nav-menu .menu-item:not(:has(.menu-action[aria-current="page"])) {
        display: none;
    }
    
    #actor_navigation:not(.expression-home) .nav-menu .menu-item {
        --angle-inset: 17px;
        
        margin-left: -12px;
        width: 180px;
    }
    
    .stage:not(.stage-home) #actor_navigation .nav-menu .menu-item {
        width: 180px;
    }
    
    /* Inside pages: mobile navigation flyout controller */
    #actor_navigation .nav-menu .menu-item.item-mobile {
        display: block !important;
        min-width: 90px;
        width: auto !important;
        flex-grow: 1;
    }

    /* Homepage: reconfigure full menu to vertical */
    #actor_navigation.expression-home .nav-menu {
        --angle-inset: 95px;
        --button-menu-back: #fff;

        flex-direction: column;
        height: auto;
        margin-top: -16px;
        margin-left: -86px;
        padding-left: 4px;
        padding-right: 4px;
        row-gap: 4px;
        flex-grow: 1;
        clip-path: polygon(var(--angle-inset) 0, 100% 0%, 100% 100%, 0% 100%);
    }
    
    #actor_navigation.expression-home .nav-menu .menu-item {
        clip-path: none;
        margin-left: 0;
        width: 100%;
    }
    
    #actor_navigation.expression-home .nav-menu .menu-item .menu-action {
        padding-left: 104px;
        text-align: left;
    }
}


/* !--- Mobile only: navigation flyout */
#actor_navigation .flyout-host {
    display: none;
}

@media only screen and (max-width: 1320px) {
    #actor_navigation:has(.substance-flyout.flyout-active) .flyout-host {
        display: block;
        position: absolute;
        top: calc(23px - 9px);
        left: 0;
        width: 100vw;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Homepage */
/* -------------------------------------------- */

/* !--- General containers */
#actor_home .home-content {
    position: relative;
}

#actor_home .home-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(-1 * (var(--desktop-viewport-margin) + var(--width-1col-plus)));
    width: 100vw;
    height: 100%;
    background-color: var(--backcolor-page-dark);
    z-index: -1;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_home .home-intro .home-block + .home-block {
        margin-top: 32px;
    }
    
    #actor_home .home-content .content-pilot {
        margin-top: 32px;
    }
    
    #actor_home .home-content:before {
        left: calc(-1 * var(--mobile-gutter))
    }
}


/* !--- Introduction */
#actor_home .home-intro .intro-mission {
    position: relative;
}

#actor_home .home-intro .intro-mission h1 {
    position: absolute;
    top: calc(var(--navigation-negative-distance) + 50px);
    left: calc(-1 * var(--inset-left));
    width: var(--width-4col);
    margin-top: 0;
    font-weight: 500;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

#actor_home .home-intro .intro-mission h1 mark {
    font-weight: 600;
    display: block;
}

/* Medical info */
#actor_home .home-intro .intro-medical .medical-numbers div + div {
    margin-top: 16px;
}

#actor_home .home-intro .intro-medical .medical-numbers dt {
    display: flex;
    column-gap: 8px;
    align-items: baseline;
    color: var(--textcolor-head-sub);
    border-bottom: 2px solid var(--vbt-thunder-light);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

#actor_home .home-intro .intro-medical .medical-numbers dt mark {
    font: var(--textset-l);
}

#actor_home .home-intro .intro-medical .medical-numbers dt span {
    font-weight: 500;
}

#actor_home .home-intro .intro-medical .medical-numbers dd {
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_home .home-intro .intro-mission h1 {
        position: static;
        width: 100%;
        text-align: center;
    }
}

/* Button for intro video overlay */
#actor_home .player-action {
    background: var(--vbt-ball-dark) left center url("./img/icons/icon_video_button.webp") no-repeat;
    background-size: contain;
    color: #fff;
    height: 108px;
    width: calc(100% + var(--width-1col));
    margin-left: calc(-1 * var(--width-1col));
    padding-left: 225px;
    padding-right: 8px;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

#actor_home .player-action span {
    font: var(--textset-s);
}

#actor_home .player-action span em {
    display: block;
    font: var(--textset-xxl);
    font-weight: 500;
}

@media only screen and (max-width: 1320px) {
    #actor_home .player-action {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
        width: calc(100% + 2 * var(--mobile-gutter));
    }
}

@media (hover: hover) {
    #actor_home .player-action:hover {
        background-color: var(--vbt-ball-medium);
        transition: var(--transition-color-outline)
    }
}

#actor_home .player-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 5px;
    transition: var(--transition-color-outline)
}


/* !--- Content */
#actor_home .home-content .content-news {
    grid-column: 1;
}

#actor_home .home-content .content-research {
    grid-column: 1;
}

#actor_home .home-content .content-solution {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* News teasers */
#actor_home .home-content .content-news ul {
    margin-left: calc(-1 * var(--width-1col));
}

#actor_home .home-content .content-news .news-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

#actor_home .home-content .content-news .news-teaser .substance-timestamp {
    display: inline-block;
}

#actor_home .home-content .content-news .news-teaser .link-action {
    display: block;
    font: var(--textset-s);
    font-weight: 600;
    margin-top: 8px;
}

#actor_home .home-content .content-news .news-teaser .link-action:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Research key figures */
#actor_home .home-content .content-research .substance-subhead {
    margin-top: 16px;
    margin-bottom: 16px;
}

#actor_home .home-content .content-research dl {
    margin-left: calc(-1 * var(--width-1col));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
}

#actor_home .home-content .content-research div {
    border: 1px solid #fff;
    background: var(--backcolor-page);
    padding: 8px;
}

#actor_home .home-content .content-research dt mark {
    font: var(--textset-xl);
    color: var(--vbt-ball-dark);
    font-weight: 500;
    display: block;
}

#actor_home .home-content .content-research dt span {
    display: block;
    font: var(--textset-s);
    font-weight: 600;
    color: var(--vbt-ball-dark);
    margin-top: -1px;
    margin-bottom: 4px;
}

#actor_home .home-content .content-research dd {
    font: var(--textset-s);
}

/* Solution */
@media only screen and (max-width: 1320px) {
    #actor_home .home-content .content-news {
        grid-row: 2;
    }
    
    #actor_home .home-content .content-research {
        grid-row: 3;
    }
    
    #actor_home .home-content .content-solution {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 32px;
    }

    #actor_home .home-content .substance-subhead {
        margin-bottom: 16px;
    }
    
    #actor_home .home-content .content-solution .substance-media {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
        width: calc(100% + 2 * var(--mobile-gutter));
        max-width: none;
    }
    
    #actor_home .home-content .content-news ul {
        margin-left: 0;
    }
    
    #actor_home .home-content .content-research dl {
        margin-left: 0;
        grid-template-columns: 1fr;
        row-gap: 8px;
        margin-bottom: 16px;
    }
    
    #actor_home .home-content .content-research div {
        display: grid;
        grid-template-columns: 0.4fr 0.6fr;
        column-gap: 8px;
    }
    
    #actor_home .home-content .content-research dt span {
        margin-bottom: 0;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Associated organisations */
/* -------------------------------------------- */

#actor_associations {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 16px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_associations {
        display: block;
        text-align: center;
    }
}


/* !--- Logo matrix */
#actor_associations ul {
    display: flex;
    column-gap: 48px;
    align-items: center;
    padding: 16px 0 16px 0;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_associations ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 32px;
    }
    
    #actor_associations .association-item {
        text-align: center;
    }
    
    #actor_associations .association-item .media-image {
        height: 40px;
    }
}


/* !--- LinkedIn outlink */
#actor_associations .link-action {
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_associations .link-action {
        margin-top: 32px;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Product information */
/* -------------------------------------------- */

#actor_product .product-block {
    margin-bottom: 48px;
}


/* !--- Product animation */
#actor_product > .product-block .substance-media {
    margin-top: 32px;
    margin-left: calc(-1 * var(--desktop-gutter));
    margin-right: calc(-1 * var(--desktop-gutter));
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_product > .product-block .substance-media {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
    }
}


/* !--- Tab sections */
#actor_product .product-tabs .substance-tab {
    margin-top: 16px;
    margin-bottom: 24px;
}

/* !--- Feature matrix */
#actor_product .product-block .richtext-matrix {
    margin-left: calc(-1 * var(--desktop-gutter));
    margin-right: calc(-1 * var(--desktop-gutter));
}

#actor_product .product-block .richtext-matrix > div:nth-child(odd) {
    padding-left: var(--desktop-gutter);
}

#actor_product .product-block .richtext-matrix > div:nth-child(even) {
    padding-right: var(--desktop-gutter);
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_product .product-block .richtext-matrix {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
    }
    
    #actor_product .product-block .richtext-matrix > div:nth-child(even) {
        padding: var(--mobile-gutter);
    }
}


/* !--- Hub list */
#actor_product .product-block .richtext-matrix.matrix-mono > div:nth-child(odd), 
#actor_product .product-block .richtext-matrix.matrix-mono > div:nth-child(even) {
    padding-left: var(--desktop-gutter);
    padding-right: var(--desktop-gutter);
}

#actor_product .product-block .richtext-matrix.matrix-mono dd {
    display: flex;
    align-items: center;
    column-gap: 32px;
}

#actor_product .product-block .richtext-matrix.matrix-mono dd .substance-media {
    margin: 0;
}

#actor_product .product-block .richtext-matrix.matrix-mono dd .substance-media .media-image {
    width: 140px;
    
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_product .product-block .richtext-matrix.matrix-mono > div:nth-child(odd), 
    #actor_product .product-block .richtext-matrix.matrix-mono > div:nth-child(even) {
        padding: var(--mobile-gutter);
    }
    
    #actor_product .product-block .richtext-matrix.matrix-mono dd {
        flex-direction: column;
        row-gap: 12px;
        align-items: flex-start;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Product screenshots */
/* -------------------------------------------- */

/* !--- Grand containers */
#actor_screens {
}

#actor_screens .screen-block {
    margin-bottom: 48px;
}


/* !--- Screenshots */
#actor_screens .screen-block .substance-media {
    margin-left: calc(-1 * var(--desktop-gutter));
    margin-bottom: 16px;
}

#actor_screens .screen-block .substance-media figcaption {
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_screens .screen-block .substance-media {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
    }
    
    #actor_screens .screen-block .substance-media figcaption {
        padding-right: var(--mobile-gutter);
    }
}


/* !--- Descriptions */
#actor_screens .screen-block .substance-richtext {
    font: var(--textset-s);
}


/* -------------------------------------------- */
/* !ACTOR: News */
/* -------------------------------------------- */

/* !--- Grand containers */
#actor_news .news-item {
    display: grid;
    grid-template-columns: var(--width-5col) var(--width-9col);
    column-gap: var(--width-1col-plus);
    padding-bottom: 24px;
    border-bottom: 4px solid var(--linecolor-standard);
    margin-bottom: 24px;
}

#actor_news .news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

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


/* !--- News article */
/* Header */
#actor_news .news-item .news-block .substance-subhead {
    margin-bottom: 16px;
}

#actor_news .news-item .news-block .substance-timestamp {
    margin-bottom: 12px;
    display: inline-block;
}

/* Content */
#actor_news .news-item .news-block.block-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--desktop-gutter);
}

#actor_news .news-item .news-block .block-image-row {
    display: flex;
    column-gap: 32px;
    align-items: center;
    margin-bottom: 16px;
}

#actor_news .news-item .news-block .block-image-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 8px;
    row-gap: 8px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_news .news-item .news-block + .news-block {
        margin-top: 16px;
    }
    
    #actor_news .news-item .news-block .substance-subhead {
        font: var(--textset-m-plus);
    }
    
    #actor_news .news-item .news-block .substance-timestamp {
        margin-bottom: 8px;
    }
    
    #actor_news .news-item .news-block.block-split {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    
    #actor_news .news-item .news-block .block-image-row {
        flex-direction: column;
        justify-content: center;
        row-gap: 16px;
    }
    
    #actor_news .news-item .news-block .block-image-matrix {
        grid-template-columns: 1fr 1fr;
    }
    
    #actor_news .news-item .news-block .substance-media:has(.media-player) {
        margin-left: calc(-1 * var(--mobile-gutter));
        margin-right: calc(-1 * var(--mobile-gutter));
    }
}


/* -------------------------------------------- */
/* !ACTOR: Science information */
/* -------------------------------------------- */

#actor_science {
}


/* -------------------------------------------- */
/* !ACTOR: Scientific publications */
/* -------------------------------------------- */

/* !--- Grand containers */
#actor_publications {
}

#actor_publications .pub-item {
    padding-top: 24px;
    margin-bottom: 24px;
    position: relative;
}

#actor_publications .pub-item:last-child {
    border-bottom: none;
}


/* !--- Publication data */
/* Title */
#actor_publications .pub-item .item-title {
    color: var(--textcolor-head);
    font-weight: 500;
    margin-bottom: 8px;
    position: relative;
    padding-top: 6px;
    border-top: 2px solid #fff;
}

#actor_publications .pub-item .item-title:before {
    content: "";
    display: block;
    position: absolute;
    left: -22px;
    top: 8px;
    width: 16px;
    height: 16px;
    background: transparent center url("./img/icons/signature_angle_page.svg") no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 1320px) {
    #actor_publications .pub-item .item-title {
        padding-left: 28px;
    }
    
    #actor_publications .pub-item .item-title:before {
        left: 0;
    }
}

/* Authors */
#actor_publications .pub-item .item-authors {
    margin-bottom: 8px;
}

/* Journal */
#actor_publications .pub-item .item-publishing {
    color: var(--textcolor-head-sub);
    font-weight: 600;
    margin-bottom: 8px;
}

#actor_publications .pub-item .item-publishing .publishing-source {
    font-weight: inherit;
}

/* Publication date */
#actor_publications .pub-item .item-publishing .substance-timestamp {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    color: var(--vbt-thunder-dark);
}

/* Extend click target to entire entry */
#actor_publications .pub-item .item-id .link-action:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* -------------------------------------------- */
/* !ACTOR: Company information */
/* -------------------------------------------- */

#actor_company h1 {
    grid-row: 1;
    grid-column: 1 / 3;
}

#actor_company .substance-richtext.richtext-intro {
    grid-row: 2;
    grid-column: 1;
}

#actor_company .substance-richtext.richtext-detail {
    grid-row: 2;
    grid-column: 2;
    column-count: 2;
    column-gap: var(--desktop-gutter);
}

#actor_company .substance-richtext.richtext-detail p {
    break-inside: avoid;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_company .substance-masthead {
        margin-bottom: 16px;
    }
    
    #actor_company .substance-richtext.richtext-detail {
        column-count: unset;
        margin-top: 16px;
    }
}


/* -------------------------------------------- */
/* !ACTOR: People lists */
/* -------------------------------------------- */

/* !--- Grand containers */
#actor_team .substance-tab {
    margin-bottom: 24px;
}


/* !--- People list */
#actor_team .team-list.list-leaders ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--width-1col);
}

#actor_team .team-list.list-partners ul {
    display: grid;
    grid-template-columns: var(--width-3col) var(--width-3col) var(--width-3col) var(--width-3col) var(--width-3col);
    column-gap: var(--desktop-gutter);
}

#actor_team .team-list.list-staff .person-item {
    display: grid;
    grid-template-columns: var(--width-10col) var(--width-5col);
    column-gap: var(--desktop-gutter);
}

#actor_team .team-list.list-staff .person-item .person-badge {
    display: grid;
    grid-template-columns: var(--width-4col-plus) var(--width-4col-plus);
    column-gap: var(--width-1col);
}

#actor_team .team-list.list-staff .person-item {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid #fff;
}

#actor_team .person-item:last-child {
    border-bottom: none;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_team .substance-masthead {
        margin-bottom: 16px;
    }
    
    #actor_team .team-list.list-leaders ul, 
    #actor_team .team-list.list-partners ul {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    
    #actor_team .person-item {
        display: block;
        margin-bottom: 0;
        padding-bottom: 16px;
        border-bottom: 2px solid #fff;
    }
    
    #actor_team .team-list.list-staff .person-item {
        grid-template-columns: 1fr;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    
    #actor_team .team-list.list-staff .person-item .person-badge {
        grid-template-columns: 1fr;
    }
    
    #actor_team .person-item .person-vita {
        margin-top: 16px;
    }
}


/* !--- Person properties */
#actor_team .person-item .person-name {
    font: var(--textset-l);
    font-weight: 600;
    color: var(--textcolor-head);
}

#actor_team .person-item .person-name:last-child {
    margin-bottom: 16px;
}

#actor_team .person-item .person-role {
    font: var(--textset-m-plus);
    font-weight: 500;
    color: var(--textcolor-head);
    margin-bottom: 16px;
}

#actor_team .list-leaders .person-item .substance-media {
    margin-top: 16px;
    margin-bottom: 16px;
}


/* !--- Company properties */
#actor_team .company-item {
    background: #fff;
    padding: 0 16px 16px 16px;
}

#actor_team .company-item .substance-media {
    margin: 32px 0 32px 0;
}

#actor_team .company-item .substance-media .media-image {
    height: 40px;
}

#actor_team .company-item .company-descript {
    font: var(--textset-s);
    font-weight: 500;
}


/* -------------------------------------------- */
/* !ACTOR: Contact information */
/* -------------------------------------------- */

/* !--- Contact blocks */
#actor_contact .contact-block {
    display: flex;
    flex-direction: column;
}

#actor_contact .contact-block .block-content {
    --angle-inset: 0;
    --angle-inset2: 0;
    
    background: #fff;
    padding: 16px;
    border-top: 4px solid var(--vbt-thunder-light);
    flex-grow: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--angle-inset)), calc(100% - var(--angle-inset2)) 100%, 0% 100%);
}

/* Block content: Touch */
#actor_contact .contact-block.block-touch .block-content h2 {
    font: var(--textset-m-plus);
    font-weight: 500;
    color: var(--vbt-thunder-dark);
    margin-top: 28px;
    margin-bottom: 6px;
}

#actor_contact .contact-block.block-touch .block-content h2:first-child {
    margin-top: 0;
}

#actor_contact .contact-block.block-touch .block-content p + p {
    margin-top: 6px;
}

#actor_contact .contact-block.block-touch .block-content .link-action.action-linkedin {
    margin-top: 16px;
}

/* Block content: Publisher */
#actor_contact .contact-block.block-publisher .address-block {
    margin-bottom: 8px;
}

#actor_contact .contact-block.block-publisher .address-block:first-child p:first-child {
    margin-bottom: 8px;
}

#actor_contact .contact-block.block-publisher em {
    font-weight: 500;
}

/* Block content: Credits */
#actor_contact .contact-block.block-credits {
    font: var(--textset-s);
}

#actor_contact .contact-block.block-credits p + p {
    margin-top: 16px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_contact .contact-block .substance-masthead, 
    #actor_contact .contact-block .substance-subhead {
        margin-bottom: 12px;
    }
    
    #actor_contact .contact-block + .contact-block {
        margin-top: 32px;
    }
}


/* -------------------------------------------- */
/* !ACTOR: Privacy information */
/* -------------------------------------------- */

/* Small viewports */
@media only screen and (max-width: 1320px) {
    #actor_privacy .substance-masthead {
        margin-bottom: 16px;
    }
}

/* -------------------------------------------- */
/* !ACTOR: Overlay image viewer */
/* -------------------------------------------- */

/* !--- Overlay controller with close button */
#actor_viewer .viewer-controller {
    display: flex;
}

#actor_viewer .viewer-controller .controller-exit {
    --angle-inset: 23px;
    
    padding-left: 20px;
    margin-left: auto;
    border-right: 4px solid #fff;
    background: var(--button-primary-back);
    clip-path: polygon(var(--angle-inset) 0, 100% 0%, 100% 100%, 0% 100%);
}

#actor_viewer .viewer-controller .controller-exit .primary-action:focus-visible {
    outline-offset: -6px;
}

/* !--- Image with caption */
#actor_viewer .viewer-canvas {
    border: 4px solid #fff;
    background: #fff;
}

#actor_viewer .viewer-canvas .substance-media figcaption {
    padding: 16px;
    border-bottom: none;
}