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

/* -------------------------------------------- */
/* !Initialization of all interactive elements */
/* -------------------------------------------- */

/* !--- Initalize abstract buttons */
.tt-eins button {
	border: none;
	border-radius: 0;
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-align: inherit;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
}

.tt-eins button:not([class]):active {
	color: inherit;
}


/* !--- Initalize abstract links */
.tt-eins a {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}


/* -------------------------------------------- */
/* !COMPONENT: Home link */
/* -------------------------------------------- */

.tt-eins .home-action {
    transition: var(--transition-opacity);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .home-action:hover {
        transition: var(--transition-opacity);
    }
}

.tt-eins .home-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: -8px;
    transition: var(--transition-color-outline)
}


/* -------------------------------------------- */
/* !COMPONENT: Menu entries */
/* -------------------------------------------- */

.tt-eins .menu-action {
    display: block;
    font: var(--textset-m-plus);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--button-menu-text);
    background: var(--button-menu-back);
    white-space: nowrap;
    width: 100%;
    transition: var(--transition-color-outline);
}

.tt-eins .menu-action.tab-action {
    font: var(--textset-m);
    font-weight: 600;
}

.tt-eins .menu-action.view-action {
    font: var(--textset-m-plus);
    font-weight: 500;
    text-transform: none;
}

/* Active menu section */
.tt-eins .menu-action[aria-current="page"], 
.tt-eins .menu-action.tab-action[aria-selected="true"] {
    color: var(--button-menu-active-text);
    background: var(--button-menu-active-back);
}

/* Menu flyout controller */
.tt-eins .menu-action.flyout-controller {
    position: relative;
    text-indent: -1000em;
}

.tt-eins .menu-action.flyout-controller:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background: transparent 0 0 url("./img/icons/iconsprite_action_menu.svg") no-repeat;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .tt-eins .menu-action {
        font: var(--textset-m);
        font-weight: 500;
    }
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .menu-action:hover {
        color: var(--button-menu-text-hover);
        background: var(--button-menu-back-hover);
        transition: var(--transition-color-outline);
    }
    
    .tt-eins .menu-action.flyout-controller:hover:before {
        background-position: 0 -40px;
    }
}

.tt-eins .menu-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: -6px;
    transition: var(--transition-color-outline)
}

.tt-eins .menu-action[aria-current="page"], 
.tt-eins .menu-action.tab-action[aria-selected="true"] {
    outline: var(--focus-outline-inverse);
}


/* -------------------------------------------- */
/* !COMPONENT: Link actions */
/* -------------------------------------------- */

.tt-eins .link-action {
    color: var(--button-link-text);
    font-weight: 500;
    text-decoration: underline;
    transition: var(--transition-color-outline)
}

/* LinkedIn variant */
.tt-eins .link-action.action-linkedin {
    position: relative;
    padding-right: 40px;
    min-height: 32px;
    line-height: 32px;
}

.tt-eins .link-action.action-linkedin:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    background: transparent url("./img/icons/linkaction_linkedin.svg") no-repeat;
    background-size: contain;
}

/* Logo-only variant */
.tt-eins .link-action.action-logo {
    transition: var(--transition-opacity);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .link-action:hover {
        color: var(--button-link-text-hover);
        transition: var(--transition-color-outline)
    }
    
    .tt-eins .link-action.action-logo:hover {
        opacity: 0.5;
        transition: var(--transition-opacity);
    }
}

.tt-eins .link-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 5px;
    transition: var(--transition-color-outline)
}


/* -------------------------------------------- */
/* !COMPONENT: View actions */
/* -------------------------------------------- */

/* !--- Container + text label */
.tt-eins .view-action {
    position: relative;
    height: 40px;
    padding: 0 0 0 44px;
}


/* !--- Arrow icon */
.tt-eins .view-action:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: transparent 0 0 url("./img/icons/iconsprite_primary_plus.svg") no-repeat;
    transform: rotateZ(0);
    z-index: 5;
    transition: var(--transition-color-outline-icon);
}

/* Active state: rotated arrow */
.tt-eins .view-action.item-active:after {
    transform: rotateZ(45deg);
    transition: var(--transition-color-outline-icon);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .view-action:hover:after {
        background-position: 0 -40px;
    }
}


/* -------------------------------------------- */
/* !COMPONENT: Primary actions */
/* -------------------------------------------- */

/* !--- Standard button with frame (Tertiary Ghost) */
.tt-eins .primary-action {
    position: relative;
    font: var(--textset-s);
    font-weight: 600;
    color: var(--button-primary-text);
    line-height: 40px;
    height: 40px;
    background-color: var(--button-primary-back);
    padding: 0 18px 0 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-universal);
}

/* Optional: icon placement */
.tt-eins .primary-action.action-icon {
    padding-left: 44px;
}

.tt-eins .primary-action.action-icon:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    background: transparent center 0 no-repeat;
}

/* Optional: icon-only button */
.tt-eins .primary-action.action-icon.icon-only {
    width: 40px;
    padding: 0;
    color: transparent !important;
}

.tt-eins .primary-action.action-icon.icon-only:before {
    left: 50%;
    margin-left: -20px;
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .primary-action:hover {
        color: var(--button-primary-text-hover);
        background-color: var(--button-primary-back-hover);
        transition: var(--transition-universal);
    }
    
    .tt-eins .primary-action.action-icon:hover:before {
        background-position: center -40px;
    }
}

.tt-eins .primary-action:focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 1px;
    transition: var(--transition-universal);
}


/* !--- Icons for primary actions */
.tt-eins .primary-action.action-icon.icon-plus:before {
    background-image: url("./img/icons/iconsprite_primary_plus.svg");
}

.tt-eins .primary-action.action-icon.icon-close:before {
    background-image: url("./img/icons/iconsprite_primary_close.svg");
}


/* -------------------------------------------- */
/* !COMPONENT: Media container (images + videos) */
/* -------------------------------------------- */

/* !--- Outer container */
.tt-eins .substance-media {
    display: block;
    position: relative;
    margin: 0;
}

.tt-eins .substance-media.media-leader {
    --angle-inset: 63px;
    
    border: 4px solid #fff;
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--angle-inset)), calc(100% - 35px) 100%, 0% 100%);
}

.tt-eins .substance-media .link-action {
    display: block;
    width: 100%;
    height: 100%;
}

/* !--- Video container */
.tt-eins .substance-media .media-player {
    aspect-ratio: 16 / 9;
}

.tt-eins .substance-media .media-player iframe {
    width: 100%;
    height: 100%;
}


/* !--- Image container */
.tt-eins .substance-media .media-image {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    line-height: 1;
    font-size: 0.1px;
}

.tt-eins .substance-media.media-staff .media-image {
    background-color: var(--vbt-thunder-dark);
}

/* Stripe markers */
.tt-eins .substance-media.media-leader .media-image:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 0;
    right: -22px;
    width: 75px;
    height: 92px;
    background: transparent center url("./img/icons/signature_angle_photo.svg") no-repeat;
}

.tt-eins .substance-media.media-staff .media-image:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -49px;
    width: 75px;
    height: 92px;
    background: transparent center url("./img/icons/signature_angle_photo.svg") no-repeat;
}

/* Actual image element */
.tt-eins .substance-media .media-image img {
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    min-height: 100%; /* fix for Safari */
    object-position: center;
    border: none;
}


/* !--- Optional: media caption */
/* Caption placement is usually done on the #actor level */
.tt-eins .substance-media.media-captioned figcaption {
    font: var(--textset-s);
    background-color: var(--backcolor-caption);
    padding: 4px;
    border-bottom: 2px solid #fff;
}

.tt-eins .substance-media.media-captioned figcaption:has(.primary-action) {
    padding-left: 52px;
    position: relative;
}

.tt-eins .substance-media.media-captioned figcaption .primary-action {
    position: absolute;
    top: 50%;
    left: 6px;
    margin-top: -20px;
}


/* -------------------------------------------- */
/* !COMPONENT: Tab switching bar */
/* -------------------------------------------- */

/* !--- Outer containers */
.tt-eins .substance-tab {
}

.tt-eins .substance-tab ul {
    --button-height: 40px;

    display: flex;
    margin-left: 18px;
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .tt-eins .substance-tab ul {
        flex-direction: column;
        margin-left: 0;
    }
}


/* !--- Single tab */
.tt-eins .substance-tab .tab {
    --angle-inset: 23px;
    
    position: relative;
    height: var(--button-height);
    clip-path: polygon(var(--angle-inset) 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
    margin-left: -18px;
}

.tt-eins .substance-tab .tab:first-child {
    clip-path: polygon(0 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
}

/* Tab button (interaction states handled by .menu-action) */
.tt-eins .substance-tab .tab .tab-action {
    line-height: var(--button-height);
    padding-left: 48px;
    padding-right: 48px;
}

.tt-eins .substance-tab .tab:first-child .tab-action {
    padding-left: 32px;
}

.tt-eins .substance-tab .tab.item-active .tab-action {
    background-color: var(--vbt-ball-dark);
}

/* Small viewports */
@media only screen and (max-width: 1320px) {
    .tt-eins .substance-tab .tab {
        clip-path: polygon(0 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
        margin-left: 0;
        margin-bottom: 4px;
    }
    
    .tt-eins .substance-tab .tab .tab-action, 
    .tt-eins .substance-tab .tab:first-child .tab-action {
        padding-left: 16px;
    }
}


/* !--- Visibility of controlled tab panels */
/* This is a generic handling of the visible display mode! */
/* In some cases, other CSS can set its own display mode for active tab panels */
.tt-eins *[role="tabpanel"] {
    display: none;
}

.tt-eins *[role="tabpanel"].item-active {
    display: block;
}



/* -------------------------------------------- */
/* !COMPONENT: Accordion */
/* -------------------------------------------- */

/* !--- Accordion block */
.tt-eins .substance-accordion .accordion-block {
    margin-bottom: 32px;
}


/* !--- Block head */
.tt-eins .substance-accordion .accordion-block .block-head {
    margin-bottom: 16px;
}

/* Header elements */
.tt-eins .substance-accordion .accordion-block .block-head .head-controller {
    --angle-inset: 23px;
    
    height: var(--button-height);
    clip-path: polygon(0 0, 100% 0%, calc(100% - var(--angle-inset)) 100%, 0% 100%);
}

.tt-eins .substance-accordion .head-controller .accordion-controller {
    display: block;
    width: 100%;
}

/* Small viewports */
@media only screen and (max-width: 1216px) {
    .tt-eins .substance-accordion .accordion-block .block-head {
    }
    
    .tt-eins .substance-accordion .accordion-block .block-head .head-controller {
    }
    
    
    .tt-eins .substance-accordion .head-controller .accordion-controller {
    }
}


/* !--- Controlled expander container */
.tt-eins .substance-accordion .accordion-block .block-content {
    display: none;
}

.tt-eins .substance-accordion .accordion-block.item-active .block-content {
    display: block;
}

@media only screen and (max-width: 1216px) {
    .tt-eins .substance-accordion .accordion-block .block-content {
        padding-left: 0;
    }
}


/* -------------------------------------------- */
/* !COMPONENT: Flyout dialogs */
/* -------------------------------------------- */

/* !--- Outer container with controller and flyout container */
.tt-eins .substance-flyout {
    position: relative;
}


/* !--- Triangle connector for active flyout (on the initiating container) */
.tt-eins .substance-flyout.flyout-active:before {
    content: "";
    display: none; /* TEMPORARY BLOCKAGE */
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    bottom: -16px;
    inset-inline-start: 50%;
    margin-inline-start: -8px;
    z-index: 30;
    transform: rotateZ(45deg);
}


/* !--- Flyout container */
/* Detached flyout hosts need proper positioning from their #actor instances */
.tt-eins .substance-flyout .flyout-host.host, 
.tt-eins .flyout-host.host-detached {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: var(--width-6col);
    min-height: 48px;
    padding: 0;
    margin: 0;
    background: #fff;
    border: none;
    box-shadow: var(--shadow-flyout);
    z-index: 20;
    overflow: auto;
}


/* Visibility of <dialog> flyouts is handled by JS/HTML */
/* Visibility of menu flyouts must be handled here */
.tt-eins .substance-flyout .flyout-host.host-menu {
    display: none;
}

.tt-eins .substance-flyout.flyout-active .flyout-host.host-menu {
    display: block;
}


/* -------------------------------------------- */
/* !COMPONENT: Submenus inside flyouts */
/* -------------------------------------------- */

/* !--- Grand containers */
/* Inside flyouts, we need outer space */
.tt-eins .flyout-host .substance-menu {
    padding: 4px;
}

/* Menu sections */
.tt-eins .substance-menu .menu-section:not(:last-child) {
    padding-bottom: 16px;
}

.tt-eins .substance-menu .menu-section + .menu-section {
    padding-top: 8px;
}

/* Section titles */


/* !--- Single menu items */
/* Standard item */
.tt-eins .substance-menu .menu-item {
}

.tt-eins .substance-menu .menu-item + .menu-item {
    border-top: 4px solid var(--linecolor-standard);
}

/* Selectable menu items incl. active state */
.tt-eins .substance-menu.menu-selectable .menu-item {
}

.tt-eins .substance-menu.menu-selectable .menu-item.item-active {
}

@media (hover: hover) {
    .tt-eins .substance-menu.menu-selectable .menu-item:hover {
    }
}

/* Content of menu item */
.tt-eins .substance-menu .menu-item .menu-action {
    padding: 8px 16px 8px 16px;
}


/* -------------------------------------------- */
/* !COMPONENT: Solo headlines */
/* -------------------------------------------- */

.tt-eins .substance-masthead {
    color: var(--textcolor-head-master);
    font: var(--textset-xl);
    margin-bottom: 32px;
}

.tt-eins .substance-subhead {
    color: var(--textcolor-head);
    font: var(--textset-l);
    margin-bottom: 32px;
}


/* -------------------------------------------- */
/* !COMPONENT: Timestamps */
/* -------------------------------------------- */

.tt-eins .substance-timestamp {
    --angle-inset: 16px;
    
    display: block;
    background: var(--vbt-ball-ultradark);
    color: #fff;
    padding: 4px 20px 4px 8px;
    font: var(--textset-s);
    font-weight: 600;
    clip-path: polygon(0 0, calc(100% - var(--angle-inset)) 0%, 100% 100%, 0% 100%);
}


/* -------------------------------------------- */
/* !COMPONENT: Formatted text */
/* -------------------------------------------- */

/* !--- Outer textbox container */
.tt-eins .substance-richtext {
    font: var(--textset-m);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    
    --margin-standard: 1rem;
    --outset-distance: 1.5rem;
}

.tt-eins .substance-richtext.richtext-tight {
    --outset-distance: 0;
}


/* !--- Key information block */
.tt-eins .substance-richtext .richtext-key {
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    padding-top: var(--margin-standard);
    margin-bottom: var(--margin-standard);
}

.tt-eins .substance-richtext .richtext-key * {
    font: var(--textset-l);
    color: var(--textcolor-head);
}

@media only screen and (max-width: 1320px) {
    .tt-eins .substance-richtext .richtext-key * {
        font: var(--textset-m-plus);
    }
}

/* !--- Bullet matrix */
.tt-eins .substance-richtext .richtext-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
}

.tt-eins .substance-richtext .richtext-matrix.matrix-mono {
    grid-template-columns: 1fr;
}

.tt-eins .substance-richtext .richtext-matrix > div {
    background-color: #fff;
    padding: 12px 8px 12px 8px;
}

.tt-eins .substance-richtext .richtext-matrix dt {
    color: var(--textcolor-head);
    font-weight: 600;
    margin-bottom: var(--margin-standard);
}

.tt-eins .substance-richtext .richtext-matrix dd *:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 1320px) {
    .tt-eins .substance-richtext .richtext-matrix {
        grid-template-columns: 1fr;
    }
}


/* !--- Headlines */
.tt-eins .substance-richtext h1 {
    color: var(--textcolor-head-master);
    font: var(--textset-xl);
    margin: 2.1rem 0 0.8rem 0;
}

.tt-eins .substance-richtext h2 {
    color: var(--textcolor-head);
    font: var(--textset-l);
    margin: 2.1rem 0 0.8rem 0;
}

.tt-eins .substance-richtext h3 {
    color: var(--textcolor-head);
    font: var(--textset-m);
    font-weight: 600;
    margin: 1.8rem 0 0.8rem 0;
}

.tt-eins .substance-richtext h4 {
    color: var(--textcolor-head-sub);
    font: var(--textset-m);
    font-weight: 600;
    margin: 1.5rem 0 0.6rem 0;
}

.tt-eins .substance-richtext h2 em, 
.tt-eins .substance-richtext h3 em, 
.tt-eins .substance-richtext h4 em {
    font-weight: 400;
}

.tt-eins .substance-richtext h2:first-child, 
.tt-eins .substance-richtext h3:first-child, 
.tt-eins .substance-richtext h4:first-child {
    margin-top: 0;
}


/* !--- Paragraphs + emphasis */
.tt-eins .substance-richtext p {
    margin-bottom: 0.9rem;
}

/* Emphasis */
.tt-eins .substance-richtext em, 
.tt-eins .substance-richtext b {
    font-style: normal;
    font-weight: 500;
}

.tt-eins .substance-richtext strong {
    font-weight: 600;
}

.tt-eins .substance-richtext em > strong, 
.tt-eins .substance-richtext strong > em {
    color: var(--textcolor-accent);
    font-weight: 600;
}

.tt-eins .substance-richtext i {
    font-style: normal;
    font-weight: 200;
}


/* !--- Embedded links */
.tt-eins .substance-richtext a:not([class]) {
    display: inline;
    font-weight: inherit;
    color: var(--textcolor-link);
    text-decoration: underline;
    text-decoration-color: inherit;
    transition: var(--transition-color-outline);
}

/* Interaction states */
@media (hover: hover) {
    .tt-eins .substance-richtext a:not([class]):hover {
        color: var(--textcolor-link-hover);
        text-decoration: underline;
        transition: var(--transition-color-outline);
    }
}

.tt-eins .substance-richtext a:not([class]):focus-visible {
    outline: var(--focus-outline-standard);
    outline-offset: 1.5px;
    transition: var(--transition-color-outline);
}


/* !--- Bullet lists */
/* List container */
.tt-eins .substance-richtext ul, 
.tt-eins .substance-richtext ol {
    position: relative;
    inset-inline-start: calc(-1 * var(--outset-distance));
    width: calc(100% + var(--outset-distance));
    margin-bottom: 0.9rem;
}

.tt-eins .substance-richtext ol {
    counter-reset: listitem;
}

.tt-eins .substance-richtext ul ul, 
.tt-eins .substance-richtext ul ol, 
.tt-eins .substance-richtext ol ul, 
.tt-eins .substance-richtext ol ol {
    margin-inline-start: var(--outset-distance);
    width: calc(100% - var(--outset-distance));
}

@media only screen and (max-width: 1320px) {
    .tt-eins .substance-richtext ul, 
    .tt-eins .substance-richtext ol {
        inset-inline-start: 0;
        width: 100%;
    }
    
    .tt-eins .substance-richtext ul ul, 
    .tt-eins .substance-richtext ul ol, 
    .tt-eins .substance-richtext ol ul, 
    .tt-eins .substance-richtext ol ol {
        width: 100%;
    }
}

/* List entry */
.tt-eins .substance-richtext ol li, 
.tt-eins .substance-richtext ul li {
    list-style: none;
    margin-bottom: 0.8rem;
    position: relative;
    padding-inline-start: 1.5rem;
}

.tt-eins .substance-richtext ol li {
    counter-increment: listitem;
}

/* Index number per bullet */
.tt-eins .substance-richtext ol li:before {
    content: counter(listitem) ".";
    font-weight: 700;
    position: absolute;
    inset-inline-start: 0;
}

/* Graphical bullet point */
.tt-eins .substance-richtext ul li:before {
    content: "///";
    color: var(--vbt-thunder-medium);
    letter-spacing: -0.1em;
    position: absolute;
    inset-inline-start: 0;
    top: 0rem;
    width: 0.75rem;
    height: 0.75rem;
}

/* List entry content */
.tt-eins .substance-richtext ol li > *:last-child, 
.tt-eins .substance-richtext ul li > *:last-child {
    margin-bottom: 0;
}


/* !--- Floating images */
.tt-eins .substance-richtext .substance-media {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    max-width: 100%;
}

/* !--- Last text element */
.tt-eins .substance-richtext > *:last-child {
    margin-bottom: 0;
}