/* TEAMS

01	GENERAL
02  COLOR VARIATIONS

*/

/* -----------------------------------------------------------------------
	01	GENERAL
/* ---------------------------------------------------------------------*/

.field--name-field-area-teams-organigramm,
.group-teams-management {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
}

.field--name-field-area-teams-organigramm > .field__item,
.group-teams-management > .field__item {
    grid-column: span 6;
}

.group-teams-management > .field__item.field--name-field-title-administration-marke {
    grid-column: span 12;
    font-size: var(--font-size-h2);
    font-weight: 700;
    margin-bottom: var(--grid-gap);
    text-align: center;
}

div[class*="organigramm"] article.node--type-wfbb-team-page,
div[class*="organigramm"] article.node--type-wfbb-area-page {
    border-radius: var(--border-radius);
    box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
    padding: 0 var(--section-inner-side-padding);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 18rem;
    justify-content: center;
}

div[class*="organigramm"] article.node--type-wfbb-team-page:hover, 
div[class*="organigramm"] article.node--type-wfbb-area-page:hover {
    background: var(--color-grey-dark);
}

div[class*="organigramm"] article.node--type-wfbb-team-page:hover *,
div[class*="organigramm"] article.node--type-wfbb-area-page:hover * {
    color: #fff;
}

div[class*="organigramm"] article.node--type-wfbb-team-page h2,
div[class*="organigramm"] article.node--type-wfbb-area-page h2 {
    font-size: var(--font-size-h3);
}

div[class*="organigramm"] article.node--type-wfbb-team-page .field--name-field-contact-position,
div[class*="organigramm"] article.node--type-wfbb-area-page .field--name-field-contact-position {
    font-weight: 400;
}

.field--name-field-area-organigramm,
.field--name-field-management,
.field--name-field-teams-area-orga > .field__item{
    margin-bottom: calc(var(--grid-gap) * 1.5);
}

.top_organigramm .field--name-field-contacts-wfbb-team {
    display: flex;
}

.top_organigramm .field--name-field-contacts-wfbb-team > article:last-child {
    padding-left: 5rem;
}

div[class*="organigramm"] article.node--type-wfbb-team-page h2, 
div[class*="organigramm"] article.node--type-wfbb-area-page h2 {
    font-size: var(--font-size-h3);
}

div[class*="organigramm"] article.node--type-wfbb-team-page a:before, 
div[class*="organigramm"] article.node--type-wfbb-area-page a:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div[class*="organigramm"] article.node--type-wfbb-team-page:before, 
div[class*="organigramm"] article.node--type-wfbb-area-page:before {
    display: block;
    content: '';
    width: 4px;
    height: calc(100% - 2rem);
    background: #000;
    position: absolute;
    top: 1rem;
    left: 1rem;
    border-radius: 10px;
}

div[class*="organigramm"] article.node--type-wfbb-team-page:hover:before, 
div[class*="organigramm"] article.node--type-wfbb-area-page:hover:before {
    background: #fff;
}

div[class*="organigramm"] article.node--type-wfbb-team-page:after, 
div[class*="organigramm"] article.node--type-wfbb-area-page:after {
    width: 2.75rem;
    height: 2.75rem;
    position: absolute;
    bottom: var(--section-gap);
    right: var(--section-gap);
    background: var(--arrow-circle-dark);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

div[class*="organigramm"] article.node--type-wfbb-team-page:hover:after, 
div[class*="organigramm"] article.node--type-wfbb-area-page:hover:after {
    background: var(--arrow-circle-light);
    background-size: contain;
}

.field--name-field-text-for-teams {
    margin: calc(var(--section-gap) * 2) 0 var(--section-gap);
}

.field--name-field-text-for-teams p {
    font-size: var(--font-size-h2);
    text-align: center;
    font-weight: 700;
}

.field--name-field-team-wfbb-area-page {
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin-bottom: var(--section-gap);
}

.field--name-field-team-wfbb-area-page > .field__item {
    padding-top: 66.66%;
    box-shadow: 0 15px 30px rgba(0,0,0,.15);
    border-radius: var(--border-radius);
    position: relative;
    background: var(--color-item-bg-1);
    transition: transform ease-in-out .3s;
}

.field--name-field-team-wfbb-area-page > .field__item a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    color: var(--color-grey-dark);
    font-weight: 700;
    padding: var(--grid-gap);
}

.field--name-field-team-wfbb-area-page > .field__item:hover {
    transform: scale(1.15);
}

.group-teams-management {
    margin-top: calc(var(--section-inner-side-padding) / 2);
    padding-top: var(--section-inner-side-padding);
    border-top: 2px solid var(--color-grey-light);
}

@media (max-width: 1280px) {

    .field--name-field-team-wfbb-area-page {
        grid-template-columns: var(--grid-columns);
        grid-auto-columns: unset;
        grid-auto-flow: unset;
    }

    .field--name-field-team-wfbb-area-page > .field__item {
        grid-column: span 4;
        margin-bottom: var(--grid-gap);
    }

}

@media (max-width: 991px) {

    .field--name-field-area-teams-organigramm > .field__item, .group-teams-management > .field__item {
        grid-column: span 12;
    }

    .field--name-field-area-teams-organigramm > .field__item, .group-teams-management > .field__item + .field__item {
        margin-top: calc(var(--grid-gap) * 2);
    }

    .group-teams-management {
        margin-top: var(--grid-gap);
        padding-top: calc(var(--grid-gap) * 2);
    }

    div[class*="organigramm"] article.node--type-wfbb-team-page, div[class*="organigramm"] article.node--type-wfbb-area-page {
        padding: calc(var(--section-inner-side-padding) *2 );
        min-height: auto;
    }

}

@media (max-width: 767px) {

    .field--name-field-team-wfbb-area-page > .field__item {
        grid-column: span 12;
        padding-top: 0;
    }

    .field--name-field-team-wfbb-area-page > .field__item a {
        position: relative;
    }


}

@media (max-width: 500px) {

    .top_organigramm .field--name-field-contacts-wfbb-team {
        flex-direction: column;
    }

    .top_organigramm .field--name-field-contacts-wfbb-team > article:last-child {
        padding: 0;
        margin-top: var(--grid-gap)
    }

}


/* -----------------------------------------------------------------------
	02	COLOR VARIATIONS
/* ---------------------------------------------------------------------*/

div[class*="organigramm"] article.team-rot:hover {
    background-color: var(--color-primary);
}

div[class*="organigramm"] article.team-rot h2 a {
    color: var(--color-primary);
}

div[class*="organigramm"] article.team-rot:before {
    background-color: var(--color-primary);
}

div[class*="organigramm"] article.team-rot:after {
    background: var(--arrow-circle-red);
    background-size: contain;
}



div[class*="organigramm"] article.team-blau:hover {
    background-color: var(--color-blue);
}

div[class*="organigramm"] article.team-blau h2 a {
    color: var(--color-blue);
}

div[class*="organigramm"] article.team-blau:before {
    background-color: var(--color-blue);
}

div[class*="organigramm"] article.team-blau:after {
    background: var(--arrow-circle-blue);
    background-size: contain;
}



div[class*="organigramm"] article.team-grün:hover {
    background-color: var(--color-green);
}

div[class*="organigramm"] article.team-grün h2 a {
    color: var(--color-green);
}

div[class*="organigramm"] article.team-grün:before {
    background-color: var(--color-green);
}

div[class*="organigramm"] article.team-grün:after {
    background: var(--arrow-circle-green);
    background-size: contain;
}


div[class*="organigramm"] article.team-orange:hover {
    background-color: var(--color-orange);
}

div[class*="organigramm"] article.team-orange h2 a {
    color: var(--color-orange);
}

div[class*="organigramm"] article.team-orange:before {
    background-color: var(--color-orange);
}

div[class*="organigramm"] article.team-orange:after {
    background: var(--arrow-circle-orange);
    background-size: contain;
}