/*
******************************************************************
(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
allgemeines Element in der Infospalte
******************************************************************/

.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-100);
    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;
    }
}


/*** .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: 35px;
}

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

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

.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-60);
}

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

.teaserboxes .wrapper .link:hover .headline {
    color: var(--color-black);
}

.teaserboxes .wrapper .link:hover .text {
    color: var(--color-black);
}


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


    /*.teaserboxes .wrapper {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    justify-content: center; !* horizontal zentrieren *!*/
    /*    align-items: center; !* vertikal zentrieren *!*/
    /*}*/


}


/*** .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-80);
    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;
}

.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%;
}

*/