/*
******************************************************************
(c) sinntun.codes
******************************************************************
*/

/*****************************************************************
**** Commons (PageElement-übergreifend)
******************************************************************/

.contentbox,
.contentbox-main,
.contentbox-info {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/*** .contentbox
allgemeines Content Element
******************************************************************/

.contentbox {
    width: 100%;
}

/*** .contentbox-main
allgemeines Content Element in der Main-Spalte
******************************************************************/

.contentbox-main {
    margin-bottom: 55px;
}

/*** .contentbox-info
allgemeines Element in der Infospalte
******************************************************************/

.contentbox-info {
    clear: both;
    margin-bottom: 55px;
}


/*** .text-image
******************************************************************/

.text-image .wrapper {
    width: 100%;
    display: flex;
}

.text-image .wrapper.text-image {
    gap: 30px;
}

.text-image .wrapper .column {
    display: flex;
    flex-direction: row;
    gap: 30px;
    width: 100%;
}

.text-image .wrapper .column.width_100 {
    width: 100%;
}

.text-image .wrapper .column.width_75 {
    width: calc(75% - 6px);
}

.text-image .wrapper .column.width_50 {
    width: calc(50% - 10px);
}

.text-image .wrapper .column.width_25 {
    width: calc(25% - 22px);
}

.text-image .wrapper .column .cell {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.text-image .wrapper .column .cell .icons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.text-image .wrapper .column .cell.width_25 {
    width: calc(25% - 22px);
}

.text-image .wrapper .column .cell.width_50 {
    width: calc(50% - 10px);
}

.text-image .wrapper .column .cell.width_75 {
    width: calc(75% - 6px);
}

.text-image .wrapper .column .cell .text {
    font-size: 24px;
    color: var(--color-60);
}

.text-image .wrapper .column .cell .text strong {
    font-weight: 600;
}

.text-image .wrapper .column .cell .text h2 {
    font-size: 45px;
    color: var(--color-80);
    line-height: 54px;
}

.text-image .wrapper .column .cell .text h3 {
    color: var(--color-80);
    font-size: 24px;
}

.text-image .wrapper .column .cell .text p {
    line-height: 32px;
}

.text-image .wrapper .column .cell .text a {
    font-size: inherit;
    color: inherit;
    line-height: 32px;
}

.text-image .wrapper .column .texteditor *:not(:first-child) {
    margin-top: 26px;
}

.text-image .wrapper .column .texteditor p[linebreak='true'] {
    margin-top: 0;
}

@media only screen and (max-width: 1400px) {
    .text-image .wrapper .column.width_75,
    .text-image .wrapper .column.width_25,
        /*.text-image .wrapper .column .cell.width_75,*/
    .text-image .wrapper .column .cell.width_25 {
        width: calc(50% - 10px);
    }

    .text-image .wrapper .column .cell.width_25.empty {
        width: calc(25% - 22px);
    }

    .text-image .wrapper .column .cell.width_25.remove-early {
        display: none;
    }

}

@media only screen and (max-width: 1200px) {
    .text-image .wrapper .column .cell .text h2 {
        font-size: 38px;
    }
}

@media only screen and (max-width: 1024px) {
    .text-image .wrapper .column .cell .icons {
        gap: 12px;
    }

    .text-image .wrapper .column .cell .icons .icon {
        width: 65px;
    }
}

@media only screen and (max-width: 800px) {
    .text-image .wrapper .column .cell .text h2 {
        font-size: 28px;
        line-height: 42px;
    }

    .text-image .wrapper .column .cell .text {
        font-size: 20px;
        line-height: 30px;
    }
}

@media only screen and (max-width: 480px) {
    .text-image .wrapper.text-image {
        flex-wrap: wrap;
    }

    .text-image .wrapper .column.width_25,
    .text-image .wrapper .column.width_50,
    .text-image .wrapper .column.width_75,
    .text-image .wrapper .column .cell.width_25,
    .text-image .wrapper .column .cell.width_50,
    .text-image .wrapper .column .cell.width_75 {
        width: 100%;
    }

    .text-image .wrapper .column .cell.empty {
        display: none;
    }
}


.imagecolumn.column.width_75.right {
    order: 1;
}


.text-image .wrapper.left {
    justify-content: flex-start;
}

.text-image .wrapper.middle {
    justify-content: center;
}

.text-image .wrapper.right {
    justify-content: flex-end;
}

.text-image .wrapper.width_75 .column {
    width: calc(75% - 15px);
}

.text-image .wrapper.width_50 .column {
    width: calc(50% - 15px);
}

.text-image .wrapper.width_25 .column {
    width: calc(25% - 15px);
}

.wrapper.width_25.column1 .column {
    width: 100%;
    padding-left: 0%;
    padding-right: 75%;
}

.wrapper.width_25.column2 .column {
    width: 100%;
    padding-left: 25%;
    padding-right: 50%;
}

.wrapper.width_25.column3 .column {
    width: 100%;
    padding-left: 50%;
    padding-right: 25%;
}

.wrapper.width_25.column4 .column {
    width: 100%;
    padding-left: 75%;
    padding-right: 0%;
}


/*** .overview-list
---
******************************************************************/

.overview-list {
    display: flex;
    flex-flow: column;
    gap: 60px;
}

.overview-list .wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
}

.overview-list .wrapper .cell {
    width: calc(25% - 22px);
    display: flex;
    flex-flow: column;
    gap: 35px;
}

.overview-list .wrapper .cell .link {
    display: flex;
    flex-flow: column;
    gap: 15px;
}

.overview-list .wrapper .cell .text {
    font-size: 24px;
    color: var(--color-80);
    line-height: 26px;
}

.overview-list .wrapper .cell .text strong {
    font-weight: 600;
}

.overview-list .wrapper .cell:hover .text {
    color: var(--color-60);
}

@media only screen and (max-width: 1024px) {

    .overview-list .wrapper {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .overview-list .wrapper .cell {
        width: calc(50% - 22px);
    }

}


@media only screen and (max-width: 760px) {
    .overview-list .wrapper {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .overview-list .wrapper .cell {
        width: calc(100% - 22px);
    }


}


/*** .teaserboxes
---
******************************************************************/

.teaserboxes {
    display: flex;
    flex-flow: column;
    gap: 60px;
}

.teaserboxes .wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
}

@media screen and (max-width: 900px) {
    .teaserboxes .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .teaserboxes .wrapper .cell {
        width: calc(50% - 22px) !important;
    }

    .teaserboxes .wrapper .cell .image {
        height: 300px;
    }
}

@media screen and (max-width: 500px) {
    .teaserboxes .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .teaserboxes .wrapper .cell {
        width: calc(100% - 22px) !important;
    }

    .teaserboxes .wrapper .cell .image {
        height: 300px;
    }
}

.teaserboxes .wrapper .cell {
    width: calc(25% - 22px);
    display: flex;
    flex-flow: column;
    gap: 35px;
}

.teaserboxes .wrapper .cell .image {
    width: 100%;
    height: 390px;
    display: flex;
    flex-flow: column;
    gap: 35px;
    justify-content: center;
}

.teaserboxes .wrapper .cell .image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.teaserboxes .wrapper .cell .link {
    display: flex;
    flex-flow: column;
    gap: 35px;
}

.teaserboxes .wrapper .cell .headline {
    font-size: 45px;
    line-height: 45px;
    color: var(--color-80);
}

.teaserboxes .wrapper .cell .text {
    font-size: 24px;
    color: var(--color-80);
}

/*** .awards-list
---
******************************************************************/

.awards-list .wrapper {
    width: 100%;
    display: flex;
    flex-flow: column;

}

.awards-list .wrapper .award-item {
    width: 100%;
    display: flex;
    gap: 30px;
}

.awards-list .wrapper .award-item .icon {
    width: 12.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.awards-list .wrapper .award-item .icon img {
    max-width: 100px;
    max-height: 80px;
}


.awards-list .wrapper .award-item .text {
    width: 87.5%;
    color: var(--color-40);
    font-size: 45px;
    border-bottom: 1px solid #AFB0B3;
    padding-top: 30px;
    padding-bottom: 30px;
}

.awards-list .wrapper .award-item .text strong {
    color: var(--color-black);
}

/*** .teaser-images
---
******************************************************************/

.teaser-images .wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
}

.teaser-images .wrapper .images-large {
    width: calc(75% - 6px);
    display: flex;
    gap: 30px;
    flex-flow: column;
}

.teaser-images .wrapper .images-small {
    width: calc(25% - 22px);
    display: flex;
    gap: 30px;
    flex-flow: column;
}

/*** .references-list
---
******************************************************************/

.references-list {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.references-list .wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
}

.references-list .wrapper .cell {
    width: calc(25% - 22px);
    display: flex;
    flex-flow: column;
    gap: 30px;
    font-size: 24px;
    color: var(--color-80);
}

.references-list .wrapper .cell .text {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.references-list .wrapper .cell .text .headline {
    color: var(--color-80);
    line-height: 32px;
}

.references-list .wrapper .cell .text .subheadline {
    color: var(--color-80);
    line-height: 32px;
}


/*** .references-detail
---
******************************************************************/

.references-detail .wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
    margin-bottom: 100px;
}

.references-detail .wrapper .column.width_75 {
    width: calc(75% - 6px);
}

.references-detail .wrapper .column.width_25 {
    width: calc(25% - 22px);
}

.references-detail .wrapper .textcolumn {
    font-size: 24px;
    color: var(--color-80);
}

.references-detail .wrapper .textcolumn .text > *:not(:last-child) {
    margin-bottom: 24px;
}

.references-detail .wrapper .textcolumn h2 {
    font-size: 24px;
    color: var(--color-80);
    margin-bottom: 24px;
    line-height: 32px;
}

.references-detail .wrapper .textcolumn p,
.references-detail .wrapper .textcolumn a {
    color: var(--color-60);
    line-height: 32px;
}

.references-detail .wrapper .textcolumn .subheadline {
    color: var(--color-80);
    margin-top: 24px;
    display: inline-block;
}

.references-detail .wrapper .textcolumn .text a,
.references-detail .wrapper .textcolumn .reference-infotext-item a {
    color: inherit;
    font-size: 24px;
}

.references-detail .wrapper .textcolumn .icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.references-detail .wrapper .imagecolumn {
    display: flex;
    flex-flow: column;
    gap: 30px;
}


/*** .accordion
---
******************************************************************/

.accordion .accordionitem {
    cursor: pointer;
    padding: 18px 18px 18px 0;
    width: 100%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 2px #b2b2b1 solid;

}

.accordion .togglecontent {
    padding: 20px 200px;
    display: none;
    overflow: hidden;
    font-size: 25px;
    grid-column: 2 / span 3; /* Starts from the second column and spans 3 columns */
}

.accordion .togglecontent strong {
    font-weight: 700;
}

.accordion .alwaysvisible {
    display: flex;
    font-size: 45px;
}

.accordion .accordion-date {
    margin-right: 30px;
    color: #b2b2b1;
    font-size: 45px;
}

.accordion .arrow {
    margin-left: 200px;
}

.accordion .accordion-icon {
    width: 100px;
    float: left;
    margin-left: 20px;
}

.accordion .text-column p {
    float: left;
}

.accordion .grid-container {
    display: grid;
    grid-template-columns: 200px 600px auto;
    word-wrap: break-word;
}

.accordion .date-column {
    grid-column: 1;
}

.accordion .text-column {
    grid-column: 2;
    caret-color: transparent;
}

.accordion .arrow-column {
    grid-column: 3;
}

.accordion .arrow-column .fa-arrow-down::before {
    font-weight: 300;
}


@media only screen and (max-width: 800px) {

    .accordion .accordionitem {
        width: auto;
    }

    .accordion .arrow {
        margin-left: 20px;
    }

    .accordion .grid-container {
        display: grid;
        grid-template-columns: auto;
        word-wrap: break-word;
    }

    .accordion .accordion-date {
        font-size: 25px;
    }

    .accordion .alwaysvisible {
        font-size: 25px;
    }


}


@media only screen and (max-width: 480px) {

    .accordion .accordion-icon {
        display: none;
    }

}