:root {
    --border-radius: 70px;
    --button-border-radius: 28px;
    --primary-gradient: linear-gradient(130deg, #375073, #1C283A);
    --green-gradient: linear-gradient(130deg, #33602E, #274823);
    --header-gradient--primary: linear-gradient(90deg, transparent, #375073 90%);
    --header-gradient--green: linear-gradient(90deg,transparent,#3e7337 90%);
    --mobile-header-gradient--green: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(8 15 7 / 0%) 12%, rgb(15 27 13 / 0%) 25%, rgb(62 115 55 / 100%) 90%, rgb(43 85 38 / 100%) 100%);
    --mobile-header-gradient--primary: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(55 80 115 / 100%) 98%, rgb(42 63 92 / 100%) 100%);
}

:root:has(.top-bar.top-bar--medium, .top-bar.top-bar--medium.top-bar--fixed) {
    --top-bar-height: 56px;
    --top-bar-height-fixed: 56px;
}

@media screen and (min-width: 840px) {
    :root:has(.top-bar.top-bar--medium, .top-bar.top-bar--medium.top-bar--fixed) {
        --top-bar-height: 130px;
        --top-bar-height-fixed: 130px;
    }
}

.brand-logo {
    position: absolute;
    top: calc(80vh - 128px + 130px - 320px);
    z-index: 1;
    height: 270px;
    left: 50%;
    transform: translate(-50%, 0);
    overflow: visible !important;
}

.brand-logo__image,
.brand-logo picture {
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.brand-logo::before {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(rgba(0 0 0 / 66%), rgba(0 0 0 / 40%), transparent, transparent);
}

@media only screen and (max-width: 839px) {
    .brand-logo {
        top: 146px;
        height: 150px;
    }
}

.burger span {
    background: none;
}

/* noinspection CssUnknownTarget */

.burger {
    background-image: url("/fileadmin/Bilder/Icons/burger.svg");
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    height: 28px;
    background-size: contain;
}

.button {
    border-radius: var(--button-border-radius);
    font-size: 18px;
    line-height: 25px;
    padding: 12px 27px;
}

.button--primary.button--shadow {
    background: #fff;
}

.button--primary.button--shadow:focus-visible,
.button--primary.button--shadow:hover {
    border-color: #fff;
}

.button--download,
.button--arrow {
    position: relative;
    padding-right: 60px;
}

/* noinspection CssUnknownTarget */

.button--download::after,
.button--arrow::after {
    display: block;
    content: "";
    width: 25px;
    height: 35px;
    position: absolute;
    -webkit-mask-image: url("/fileadmin/Bilder/Icons/Upload-Icon.svg");
            mask-image: url("/fileadmin/Bilder/Icons/Upload-Icon.svg");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    background-color: var(--primary-color);
    right: 20px;
    top: calc(50% - 3px);
    transform: translateY(-50%);
}

/* noinspection CssUnknownTarget */

.button--arrow::after {
    -webkit-mask-image: url("/fileadmin/Bilder/Icons/Pfeil-Icon.svg");
            mask-image: url("/fileadmin/Bilder/Icons/Pfeil-Icon.svg");
    height: 20px;
    top: 50%;
}

.button--download:hover::after,
.button--arrow.button--primary.button--shadow:hover::after {
    background-color: #fff;
}

html[page-designation="sustainability"] .button--primary {
    background: #3E7337;
}

html[page-designation="sustainability"] .button--primary:is(:hover, :focus-visible) {
    color: #fff;
    background: #35642f;
}

html[page-designation="sustainability"] .button--download::after {
    background-color: #fff;
}

html[page-designation="media"] .card-collection {
    display: block;
}

html[page-designation="media"] .card-collection-header {
    display: flex;
    list-style: none;
    width: calc(100% - 2rem);
    max-width: calc(90rem - 2rem);
    margin: 0 auto 2rem;
    font-weight: 600;
    padding: 0 16px;
    flex-direction: row;
    justify-content: space-between;
}

html[page-designation="media"] .card-collection-header li {
    -webkit-hyphens: auto;
            hyphens: auto;
}

html[page-designation="media"] .card-collection-header li:first-child {
    width: 25%;
}

html[page-designation="media"] .card-collection-header li:nth-child(2) {
    width: 35%;
}

html[page-designation="media"] .card-collection-header li:nth-child(3),
html[page-designation="media"] .card-collection-header li:nth-child(4) {
    width: 10%;
    text-align: center;
}

html[page-designation="media"] .card-collection-header li:nth-child(5) {
    width: 20%;
    text-align: center;
}

@media only screen and (max-width: 839px) {
    .chapter--downloads .grid__column::after {
        display: block;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        width: 20px;
        background: linear-gradient(90deg, transparent, #fff);
    }

    .download-table {
        overflow-x: scroll;
        position: relative;
        margin-bottom: 30px;
    }

    .download-table::before {
        display: block;
        height: calc(100% - 60px);
        width: 1px;
        background: var(--primary-color);
        position: absolute;
        content: "";
        left: 180px;
        top: 60px;
    }

    html[page-designation="media"] .card-collection,
    html[page-designation="media"] .card-collection-header {
        width: -moz-max-content;
        width: max-content;
        overflow: scroll;
    }


    html[page-designation="media"] .card-collection-header {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html[page-designation="media"] .chapter--downloads h2 {
        padding-bottom: 50px;
        position: relative;
    }

    html[page-designation="media"] .chapter--downloads h2::after {
        display: block;
        content: '';
        width: 30px;
        height: 30px;
        position: absolute;
        bottom: 0;
        left: calc(50vw - 50px);
        background-image: url("/fileadmin/Bilder/Icons/Pfeil-Icon.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    html[page-designation="media"] .card-collection-header::-webkit-scrollbar {
        display: none;
    }

    html[page-designation="media"] .card-collection-header li {
        min-width: 180px;
        width: 180px !important;
    }

    /* width */
    .chapter--downloads .download-table::-webkit-scrollbar {
        width: 20px;
    }

    /* Track */
    .chapter--downloads .download-table::-webkit-scrollbar-track {
        border: 1px solid var(--primary-color);
        border-radius: 10px;
    }

    /* Handle */
    .chapter--downloads .download-table::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }

    /* Handle on hover */
    .chapter--downloads .download-table::-webkit-scrollbar-thumb:hover {
        background: var(--primary-color--dark);
    }

}

.chapter--primary,
.chapter--white {
    border-radius: var(--border-radius);
    max-width: 1615px;
    margin: 0 auto 175px;
    padding: 45px 75px;
}

.chapter--primary {
    background: var(--primary-color);
}

.chapter--shadow {
    box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
}

.chapter--primary * {
    color: #fff;
}

.chapter--white {
    background: #fff;
}

.chapter--fullwidth {
    max-width: none;
    border-radius: 0;
    margin-bottom: 0;
}

.chapter--media-fullwidth .textpic--single,
.chapter--media-fullwidth .textpic--single img {
    max-width: none;
    width: 100%;
}

.chapter--services p {
    max-width: 300px;
    margin: 0 auto 32px;
}

@media only screen and (max-width: 1023px) {
    .chapter {
        padding: 45px 0;
    }

    .chapter--primary,
    .chapter--white {
        margin-bottom: 0;
    }

    .chapter--primary {
        box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
    }

    .chapter--shadow {
        box-shadow: none;
    }

    .chapter--primary + span + .chapter--primary.chapter--fullwidth {
        padding-top: 120px;
        position: relative;
        top: -70px;
        z-index: 0;
        margin-bottom: -70px;
    }

    main > .chapter:last-child {
        border-radius: 0;
    }
}

@media only screen and (max-width: 839px) {
    .chapter--white {
        background: none;
        border-radius: 0;
    }

    .chapter--primary-mobile {
        background: var(--primary-color);
        border-radius: 0 0 50px 50px;
        box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
    }

    main .chapter--primary-mobile:last-child {
        border-radius: 0;
        box-shadow: none;
        background: var(--primary-gradient);
    }

    html[page-designation="sustainability"] .chapter--primary-mobile {
        background: var(--green-gradient);
    }

    html[page-designation="sustainability"] .chapter--primary-mobile *,
    .chapter--primary-mobile * {
        color: #fff;
    }
}

.chapter--brands .text-columns {
    justify-content: flex-start;
}

.chapter--brands .text-columns__image img {
    border-radius: 0;
}

.chapter--brands .text-columns__image a {
    display: block;
    height: 100%;
}

.chapter--brands .text-columns__image img,
.chapter--brands .text-columns__image picture {
    -o-object-fit: contain !important;
       object-fit: contain !important;
    width: 100%;
    height: 100%;
    max-height: 220px;
}

@media only screen and (min-width: 600px) {
    .chapter--brands .text-columns--3 .text-columns__column .text-columns__image,
    .chapter--brands .text-columns--4 .text-columns__column .text-columns__image,
    .chapter--brands .text-columns--3 .text-columns__column .text-columns__image a,
    .chapter--brands .text-columns--4 .text-columns__column .text-columns__image a {
        max-height: 220px;
    }

    .chapter--brands .text-columns--3 .text-columns__column:first-child,
    .chapter--brands .text-columns--3 .text-columns__column {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
        display: block;
    }

    .chapter--brands .text-columns--3 .text-columns__column:first-child .text-columns__image {
        padding-top: 0;
    }

    .chapter--brands .text-columns--3 .text-columns__column:first-child > * {
        max-width: none;
    }
}

@media only screen and (min-width: 1024px) {
    .chapter--brands .text-columns--3 .text-columns__column:first-child,
    .chapter--brands .text-columns--3 .text-columns__column,
    .chapter--brands .text-columns--2 .text-columns__column {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
    }
}

@media only screen and (max-width: 599px) {
    .chapter--brands .glider-track {
        width: 100% !important;
    }

    .chapter--brands .text-columns__column {
        display: flex;
        flex-direction: column;
    }

    .chapter--brands .text-columns--3 .text-columns__column .text-columns__image {
        position: relative;
        height: 100%;
        width: 100%;
        max-height: 300px;
    }

    .chapter--brands .slider__control {
        display: block;
        width: 33px;
        height: 33px;
    }

    .chapter--brands .slider__control::before {
        width: 12px;
        height: 12px;
        left: calc(50% + 2px);
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        border: 2px solid #fff;
        border-top: none;
        border-right: none;
    }

    .chapter--brands .slider__control--prev {
        left: 20px;
    }

    .chapter--brands .slider__control--next {
        right: 20px;
    }

    .chapter--brands .slider__control.slider__control--next::before {
        left: calc(50% - 2px);
    }
}

.chapter--services .text-columns__column .text-columns__image {
    max-height: 150px;
}

.chapter--services .text-columns--3 .text-columns__column .text-columns__image img,
.chapter--services .text-columns--2 .text-columns__column .text-columns__image img {
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
    border-radius: 0;
}

.chapter--services .text-columns--3 .text-columns__column .text-columns__image,
.chapter--services .text-columns--2 .text-columns__column .text-columns__image {
    height: 100%;
    margin-bottom: 32px;
    max-height: 150px;
}

@media only screen and (min-width: 1180px) {
    .chapter--services .text-columns__column {
        flex: 0 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }
}

.chapter--team .text-columns--3 .text-columns__column .text-columns__image {
    height: auto;
    margin-bottom: 52px;
    max-height: 328px;
    max-width: 328px;
}

.team-name,
.team-position {
    margin-bottom: 40px;
}

.team-info {
    font-weight: 300;
}

.consent-widget__description,
.button.consent-widget__button {
    font-size: 18px;
}

.consent-widget {
    max-width: 800px;
}

@media only screen and (min-width: 840px) {
    .consent-widget__description,
    .button.consent-widget__button {
        font-size: 25px;
    }
}

footer {
    z-index: 1;
    position: relative;
    background: var(--primary-color);
    border: none;
}

footer a {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}

footer a:focus,
footer a:hover {
    color: var(--primary-color--light);
}

footer p {
    max-width: none;
}

footer p.font--align-center {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    justify-content: space-between;
}

html[page-designation="sustainability"] footer {
    background: #3E7337;
}

footer .textpic--single {
    max-width: 500px;
}

.footer__content > p.font--align-center:last-child {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
}

@media only screen and (max-width: 599px) {
    footer p.font--align-center {
        flex-direction: column;
        justify-content: center;
    }

    footer .textpic--single {
        max-width: 200px;
    }
}

.input-label,
.radio__label,
.form__static-text {
    font-size: 25px;
    font-weight: 300;
}

.input-label {
    margin-bottom: 20px;
}

.form__static-text-container {
    margin-top: 40px;
}

.radio-group {
    grid-column: 1;
}

.radio {
    width: 30px;
    height: 30px;
    border-color: var(--primary-color);
    opacity: 1;
    background: none;
    top: 8px;
}

.radio:checked::after {
    width: 14px;
    height: 14px;
    top: 8px;
    left: 8px;
}

.select,
.input,
.select:hover,
.input:hover,
.input:active,
.input:focus {
    font-size: 25px;
    font-weight: 300;
    color: var(--primary-color);
    height: 78px;
    padding: 20px 30px;
    background: rgb(55 80 115 / 19%);
    border-color: transparent;
    border-radius: 0;
}

.select,
.select__wrapper {
    max-width: 324px;
}

.select__wrapper::after {
    width: 32px;
    height: 22px;
    opacity: 1;
    background-color: var(--primary-color);
}

.input::-moz-placeholder {
    color: var(--primary-color);
}

.input::placeholder {
    color: var(--primary-color);
}

.input--textarea {
    min-height: 500px;
}

.input-group--has-success .select,
.input-group--has-success .input--date,
.input-group--has-success .input--date-part,
.input-group--has-success .input--text,
.input-group--has-success .input--textarea {
    background: rgb(55 80 115 / 19%);
}

.form__row {
    grid-gap: 30px;
}

.form__row,
.input-group {
    padding-top: 65px;
}

.form .button, .form button, .form button.button {
    background: #fff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 25px;
    min-width: 300px;
}

.form .button:hover,
.form .button:focus,
.form button:hover,
.form button:focus,
.form button.button:hover,
.form button.button:focus {
    background: var(--primary-color);
    color: #fff;
}

.checkbox__description {
    font-size: 25px;
    line-height: 35px;
}

.checkbox {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: none;
    border: 2px solid var(--primary-color);
    opacity: 1 !important;
    top: 5px !important;
}

.checkbox::after {
    height: 30px;
    width: 30px;
    top: -3px;
    left: 3px;
}

.checkbox__description a {
    text-decoration: underline;
}

.checkbox-group__label:hover .checkbox {
    background: none;
}

.input-group--has-error .checkbox,
.checkbox-group__label:hover .checkbox,
.input-group--has-error .checkbox:hover {
    background: none;
}

.input--file-upload,
.input--imageupload {
    position: relative;
    line-height: 39px;
}

input[type="file"]::file-selector-button {
    width: 136px;
    color: transparent;
}

input[type="file"]::before {
    position: absolute;
    pointer-events: none;
    color: var(--primary-color);
    content: "Bildupload (max 5 MB)";
    padding-left: 30px;
    left: 0;
    width: 100%;
    z-index: 1;
    background: #dde0e6;
    height: 78px;
    line-height: 78px;
    bottom: 0;
}

/* noinspection CssUnknownTarget */

input[type="file"]::after {
    position: absolute;
    pointer-events: none;
    left: 340px;
    height: 36px;
    width: 36px;
    content: "";
    -webkit-mask-image: url("/fileadmin/Bilder/Icons/upload.svg");
            mask-image: url("/fileadmin/Bilder/Icons/upload.svg");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: var(--primary-color);
    z-index: 1;
}

.input-group--has-success input[type="file"]::before {
    content: "";
    background: transparent;
}

.input-group--has-success input[type="file"]::after {
    left: initial;
    right: 15px;
    -webkit-mask-image: none;
            mask-image: none;
    content: "+";
    background: none;
    font-size: 45px;
    transform: rotate(45deg);
}

.input-group--has-success input[type="file"]::file-selector-button {
    background: transparent;
    border: none;
    display: none;
}

@media only screen and (max-width: 839px) {
    .form__static-text,
    .input-label,
    .radio__label,
    .input,
    .select,
    .input:active,
    .input:focus,
    .input:hover,
    .select:hover,
    .checkbox__description,
    .form .button,
    .form button,
    .form button.button {
        font-size: 17px;
        line-height: 30px;
    }

    .form .button,
    .form button,
    .form button.button {
        min-width: 140px;
        height: 60px;
        border-radius: 38px;
    }

    .form-navigation {
        flex-direction: row;
    }

    .input,
    .input:active,
    .input:focus,
    .input:hover,
    .select:hover,
    .select {
        height: 50px;
        padding: 10px 14px;
    }

    input[type="file"]::before {
        height: 50px;
        line-height: 50px;
        padding-left: 14px;
    }

    input[type="file"]::after {
        width: 22px;
        height: 22px;
        top: 13px;
        left: 225px;
    }

    .input-group--has-success input[type="file"]::after {
        top: 10px;
    }

    .form__row,
    .input-group {
        padding-top: 32px;
        max-width: calc(100vw - 72px);
    }

    .checkbox {
        top: 0 !important;
        flex: 0 0 30px;
    }

    .checkbox-group__label {
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 599px) {
    .grid__column {
        padding: 0 36px;
    }
}

@media only screen and (min-width: 1440px) {
    html[page-designation="search"] .sidebar-wrap .grid__column--colspan-2 {
        background: #fff;
        border-radius: var(--border-radius);
        padding: 30px 60px;
    }
}

.header {
    z-index: 1;
}

.font--boxed {
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: left;
    text-shadow: none;
}

header::before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--header-gradient--primary);
    pointer-events: none;
}

html[page-designation="sustainability"] header::before {
    background: var(--header-gradient--green);
}

.header__content {
    z-index: 1;
}

.header .content-card {
    background: none;
    border: none;
    box-shadow: none;
}

.header .content-card--primary .content-teaser__title,
.header__content .content-card__text {
    color: #fff;
    margin: 0;
    font-size: 40px;
    line-height: 49px;
    font-family: var(--headline__family);
    font-weight: 300;
}

@media only screen and (min-width: 600px) {
    header::before {
        display: none;
    }

    .page--id-30 header::before,
    .page--id-32 header::before,
    .page--id-11 header::before,
    .page--id-29 header::before,
    .page--id-28 header::before,
    .page--id-157 header::before,
    .page--id-158 header::before {
        display: block;
    }
}

@media only screen and (min-width: 840px) {
    .header .content-card--primary .content-teaser__title,
    .header__content .content-card__text {
        font-size: 54px;
        line-height: 66px;
    }

    .header .content-card--primary .content-teaser__title.font--align-left,
    .header__content .content-card__text.font--align-left {
        text-align: left !important;
    }
}

@media only screen and (max-width: 599px) {
    header::before {
        background: var(--mobile-header-gradient--primary);
    }

    .page--id-11 .header::before,
    .page--id-32 .header::before,
    .page--id-29 .header::before {
        display: none;
    }

    html[page-designation="sustainability"] header::before {
        background: var(--mobile-header-gradient--green);
    }

    .header.header--ratio-3-1 {
        min-height: 120vw;
        max-height: none;
    }

    .header-content {
        top: 50%;
        transform: translateY(-50%);
    }

    .header h2 {
        font-size: 40px;
        -webkit-hyphens: manual;
                hyphens: manual;
        line-height: 49px;
    }

    .header--slider .slider--primary .glider-dot.active {
        background: #fff;
    }

    .header.header--ratio-3-1::after {
        padding-top: 50%;
    }
}

.grid--productgrid .image-card::before {
    display: none;
}

.grid--productgrid .image-card__image>:is(img,picture) {
    -o-object-fit: contain;
       object-fit: contain;
}

.grid--productgrid {
    justify-content: flex-start;
    max-width: 1920px;
}

.image-card {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: flex-end;
}

.image-card__content {
    position: relative;
    width: 60%;
    flex: 0 0 60%;
    padding: 0;
}

.image-card__title {
    position: relative;
    font-size: 40px;
    font-weight: 600;
    line-height: 49px;
    padding: 0;
    margin-bottom: 20px;
    background: none;
}

.image-card__content p {
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 20px;
    font-weight: bold;
}

.image-card__content p span {
    font-weight: 100;
}

.image-card--design-primary .image-card__title {
    background: none;
}

.image-card__image {
    width: 40%;
    flex: 0 0 40%;
    position: relative !important;
    max-height: 500px;
}

a.image-card--zoom:is(:hover,:focus-visible) .image-card__image {
    transform: scale(1);
}

a.image-card--design-primary:is(:hover,:focus-visible) .image-card__title {
    background-color: var(--primary-color);
}

@media only screen and (min-width: 1024px) {
    .grid--4 > .grid__column {
        flex: 1 0 33.333%;
        width: 33.333%;
        max-width: 33.333%;
    }
}

@media only screen and (max-width: 839px) {
    .image-card__title {
        font-size: 35px;
    }

    .image-card__content p {
        font-size: 17px;
        line-height: 22px;
    }

    .image-card__content .button {
        font-size: 15px;
        line-height: 22px;
    }

    .image-card__image {
        max-height: 366px;
    }
}

@media only screen and (max-width: 599px) {
    .grid--productgrid {
        margin-bottom: 40px;
    }

    .grid--productgrid + .glider-dots {
        bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .image-card__content,
    .image-card__image {
        width: 50%;
        flex: 0 0 50%;
    }

    .image-card__content {
        align-self: center;
        padding: 48px 0;
    }

    .image-card__content p span {
        display: block;
    }

    .image-card {
        position: relative;
        padding-bottom: 70px;
    }

    .image-card__content .button {
        position: absolute;
        bottom: -70px;
        margin: 0;
        left: 0;
        transform: translateX(-50%);
    }
}

.image-row {
    justify-content: space-between;
    gap: 30px;
}

.image-row.image-row--3.image-row--one-third .textpic.textpic--single {
    width: -moz-fit-content;
    width: fit-content;
    flex: 0 0 fit-content;
    margin: 0;
}

.image-row.image-row--3.image-row--one-third .textpic.textpic--single img {
    max-width: 230px;
}

.grid--1 {
    max-width: 1460px;
}

.grid--2 {
    max-width: 1615px;
}

main > .grid:first-child,
main > span:first-child + .grid {
    margin-top: 0;
}

main {
    padding-top: 2rem;
    margin-top: 2rem;
}

main > * {
    z-index: 1;
    position: relative;
}

.navigation--breadcrumb {
    display: none;
}

@media only screen and (min-width: 840px) {
    .wrap--content {
        padding-top: var(--top-bar-height);
    }

    main {
        padding-top: 6rem;
        margin-top: 4rem;
        overflow: hidden;
    }
}

@media only screen and (min-width: 1440px) {
    main::before {
        display: block;
        content: "";
        position: absolute;
        z-index: 0;
        width: 730px;
        background: linear-gradient(180deg, #1C283A, var(--primary-color));
        height: calc(100% + 140rem);
        top: -50%;
        transform: rotate(220deg) translateX(-50%);
        right: 40%;
    }

    html[page-designation="sustainability"] main::before {
        background: linear-gradient(180deg, #274823, #3E7337);
    }
}

@media only screen and (max-width: 839px) {
    .page--id-153 main {
        padding-top: 0;
        margin-top: 0;
    }
}

@media only screen and (min-width: 840px) {
    .wrap--navigation,
    .navigation--main {
        display: grid;
        grid-template-columns: 1.25fr 1.25fr .5fr 240px 1fr 1fr 1fr;
        max-width: 1640px;
        padding: 0;
    }

    .navigation--main {
        grid-column: 1 / 8;
        width: 100%;
        max-width: 1640px;
        position: absolute;
        bottom: 0;
        padding: 0 16px !important;
        grid-gap: 20px;
    }

    .navigation-item__link {
        font-family: var(--headline__family);
        font-weight: 300;
        width: -moz-fit-content !important;
        width: fit-content !important;
        line-height: 1;
        border-bottom: 1px solid transparent;
    }

    .navigation--fixed .navigation-item--first-level > .navigation-item__link,
    .navigation--fixed .navigation-item--first-level > .navigation-item__link:focus,
    .navigation--fixed .navigation-item--first-level > .navigation-item__link:hover {
        color: #fff;
    }

    .navigation--fixed {
        padding-top: 0 !important;
    }

    .navigation__logo.navigation__logo--horizontal.navigation__logo--medium,
    .navigation--fixed ~ .navigation__logo,
    .top-bar--fixed ~ .wrap--navigation .navigation__logo {
        height: 146px !important;
        width: 234px;
        max-width: none;
        pointer-events: all;
        z-index: 1;
    }

    img.logo {
        padding: 30px;
        -o-object-position: center;
           object-position: center;
    }

    .navigation__logo {
        grid-column: 4;
        background: var(--primary-color);
        border-radius: 110px;
    }

    .navigation--fixed ~ .navigation__logo > *,
    .top-bar--fixed ~ .wrap--navigation .navigation__logo > * {
        padding: 1rem;
    }

    .navigation-item.navigation-item--first-level:nth-child(4) {
        grid-column: 5;
    }

    .navigation-item--first-level {
        font-size: 16px;
        text-align: center;
        height: auto;
        padding: 0 0 32px;
        font-weight: 300;
        margin: 0;
        display: flex;
        justify-content: center;
        width: -moz-fit-content;
        width: fit-content;
    }

    .navigation-item--first-level > .navigation-item__link {
        text-shadow: none;
    }

    .navigation-item:hover > .navigation-item__link,
    .navigation-item:focus > .navigation-item__link {
        border-bottom: 1px solid #fff;
        font-family: var(--paragraph__family);
    }

    .navigation--sub-nav {
        top: 48px;
        border: none;
        background: var(--primary-color);
        padding: 10px 0 !important;
    }

    html[page-designation="sustainability"] .navigation__logo,
    html[page-designation="sustainability"] .navigation--sub-nav,
    html[page-designation="sustainability"] .navigation-item--second-level > .navigation-item__link:focus,
    html[page-designation="sustainability"] .navigation-item--second-level > .navigation-item__link:hover {
        background: #3E7337;
    }

    .navigation-item--second-level {
        height: auto;
        padding: 10px;
    }

    .navigation-item--second-level > .navigation-item__link,
    .navigation-item--third-level > .navigation-item__link {
        color: #fff;
        font-size: 16px;
        font-weight: 100;
        line-height: 1;
        padding: 0;
        text-align: left;
        width: -moz-fit-content;
        width: fit-content;
        background-color: transparent !important;
    }

    .navigation-item__toggle-state {
        width: 8px;
        height: 8px;
        display: block;
        content: '';
        position: absolute;
        right: -16px;
        top: calc(50% - 18px);
        transform: translateY(-50%) rotate(45deg);
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .navigation-item--first-level:focus .navigation-item__line,
    .navigation-item--first-level:hover .navigation-item__line {
        opacity: 0;
    }

    /* SEARCH */

    .navigation-item[page-designation="search"],
    html[page-designation="search"] .navigation-item[active] {
        width: 20px;
        height: 20px;
        padding: 0;
    }

    .navigation-item[page-designation="search"] .navigation-item__link,
    .navigation-item[page-designation="search"]:focus > .navigation-item__link,
    .navigation-item[page-designation="search"]:hover > .navigation-item__link,
    html[page-designation="search"] .navigation-item[active] .navigation-item__link,
    html[page-designation="search"] .navigation-item[active]:hover .navigation-item__link,
    html[page-designation="search"] .navigation-item[active]:focus .navigation-item__link {
        color: transparent !important;
        height: 20px;
        width: 20px !important;
        border: none;
        flex: 0 0 20px;
    }

    /* noinspection CssUnknownTarget */
    .navigation-item[page-designation="search"] .navigation-item__link::before,
    html[page-designation="search"] .navigation-item[active] .navigation-item__link::before {
        display: block;
        content: "";
        width: 20px;
        height: 20px;
        -webkit-mask-image: url("/fileadmin/Bilder/Icons/Lupe_Icon.svg");
                mask-image: url("/fileadmin/Bilder/Icons/Lupe_Icon.svg");
        -webkit-mask-size: 95%;
                mask-size: 95%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #fff;
    }
}

@media only screen and (min-width: 1120px) {
    .wrap--navigation,
    .navigation--main {
        grid-template-columns: 1.25fr 1.25fr .5fr 350px 1fr 1fr 1fr;
    }

    .navigation__logo.navigation__logo--horizontal.navigation__logo--medium,
    .navigation--fixed ~ .navigation__logo,
    .top-bar--fixed ~ .wrap--navigation .navigation__logo {
        width: 344px;
    }

    .navigation-item--first-level {
        font-size: 20px;
    }

    .navigation-item__toggle-state {
        right: -18px;
        width: 10px;
        height: 10px;
    }

    .navigation-item--second-level > .navigation-item__link,
    .navigation-item--third-level > .navigation-item__link {
        font-size: 18px;
    }

    .navigation--sub-nav {
        top: 52px;
    }
}

@media only screen and (min-width: 1440px) {
    .wrap--navigation,
    .navigation--main {
        grid-template-columns: 1fr 1.25fr .75fr 450px 1fr 1fr 1fr;
    }

    .navigation__logo.navigation__logo--horizontal.navigation__logo--medium,
    .navigation--fixed ~ .navigation__logo,
    .top-bar--fixed ~ .wrap--navigation .navigation__logo {
        width: 444px;
        height: 189px !important;
    }

    .navigation-item--first-level {
        font-size: 25px;
    }

    .navigation-item--second-level > .navigation-item__link,
    .navigation-item--third-level > .navigation-item__link {
        font-size: 20px;
    }

    img.logo {
        max-height: 146px;
        padding: 1rem;
        top: -20px;
        position: relative;
    }
}

@media only screen and (max-width: 839px) {
    .navigation-contact.navigation-contact--mobile {
        right: initial;
        left: 0;
        height: var(--top-bar-height);
    }

    .wrap--navigation {
        left: 0;
        width: 100%;
        top: -100%;
        padding-top: 120px;
        background: var(--primary-color);
        transition: top .5s ease-in-out
    }

    html[page-designation="sustainability"] .wrap--navigation {
        background: #3E7337;
    }

    .navigation--main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .navigation--main .navigation-item,
    .navigation--sub-nav .navigation-item {
        border: none;
    }

    .navigation--main .navigation-item--hasSubNav {
        justify-content: center;
    }

    .navigation--main .navigation-item__link {
        font-size: 30px;
        line-height: 70px;
        font-family: var(--headline__family);
        font-weight: 300;
        text-align: center;
        display: block;
        padding: 0;
        flex-basis: 100%;
    }

    .navigation--main .navigation-item--hasSubNav > .navigation-item__link {
        flex-basis: auto;
        width: auto;
        margin-left: 30px;
    }

    .navigation-item__link--active {
        font-family: var(--paragraph__family);
        color: var(--primary-color);
        text-decoration: underline;
    }

    .navigation-item[active] {
        background: #fff;
    }

    .navigation-item[active] > .navigation-item__link {
        font-family: var(--paragraph__family);
    }

    .navigation--sub-nav {
        background: none;
    }

    .navigation--main .navigation--sub-nav .navigation-item__link {
        color: var(--primary-color);
        line-height: 50px;
    }

    .navigation-item__toggle-state {
        position: relative;
        top: -2px;
    }

    .navigation-item__toggle-state::before {
        width: 12px;
        height: 12px;
        -webkit-mask-image: none;
                mask-image: none;
        background-color: transparent;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg);
    }

    /* CHECKED */

    #navigation-state:checked ~ .wrap--content {
        left: 0;
    }

    #navigation-state:checked ~ .wrap--navigation {
        top: 0;
        transition: top .5s ease-in-out;
    }

    #navigation-state:checked ~ .wrap--overlay[for="navigation-state"] {
        opacity: 0;
    }

    .navigation-item:has(.navigation-item__state:checked) {
        background: #fff;
    }

    .navigation-item__state:checked ~ .navigation-item__link {
        color: var(--primary-color);
        font-family: var(--paragraph__family);
        text-decoration: underline;
    }

    .navigation-item__state:checked~.navigation-item__toggle-state {
        top: 4px;
    }

    .navigation-item[active] .navigation-item__toggle-state::before {
        border-color: var(--primary-color);
        border-width: 2px;
    }

    .navigation-item__state:checked ~ .navigation-item__toggle-state::before {
        transform: rotate(225deg);
        border-color: var(--primary-color);
        border-width: 2px;
    }

    .navigation-item__state:checked ~ .navigation--sub-nav {
        background: none;
        padding: 0 0 20px;
    }

    html[page-designation="sustainability"] .navigation-item__state:checked ~ .navigation-item__link,
    html[page-designation="sustainability"] .navigation-item__link--active,
    html[page-designation="sustainability"] .navigation--main .navigation--sub-nav .navigation-item__link {
        color: #3E7337;
    }

    /* SEARCH */

    .navigation-item[page-designation="search"],
    html[page-designation="search"] .navigation-item[active] {
        width: 30px;
        height: 30px;
        padding: 0;
    }

    .navigation-item[page-designation="search"] .navigation-item__link,
    .navigation-item[page-designation="search"]:focus > .navigation-item__link,
    .navigation-item[page-designation="search"]:hover > .navigation-item__link,
    html[page-designation="search"] .navigation-item[active] .navigation-item__link,
    html[page-designation="search"] .navigation-item[active]:hover .navigation-item__link,
    html[page-designation="search"] .navigation-item[active]:focus .navigation-item__link {
        color: transparent !important;
        height: 30px;
        width: 30px !important;
        border: none;
        flex: 0 0 30px;
    }

    /* noinspection CssUnknownTarget */
    .navigation-item[page-designation="search"] .navigation-item__link::before,
    html[page-designation="search"] .navigation-item[active] .navigation-item__link::before {
        display: block;
        content: "";
        width: 30px;
        height: 30px;
        -webkit-mask-image: url("/fileadmin/Bilder/Icons/magnifying-glass-solid.svg");
                mask-image: url("/fileadmin/Bilder/Icons/magnifying-glass-solid.svg");
        -webkit-mask-size: 95%;
                mask-size: 95%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background-color: #fff;
    }
}

.navigation-item__toggle-state {
    background-color: transparent !important;
}

.overlay {
    z-index: 2147483641;
}

.overlay__infos {
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
}

.button--primary.button--shadow.overlay__button {
    background: #fff;
    border-radius: var(--button-border-radius);
    text-transform: none;
    font-size: 18px;
}

.overlay__infos p > a {
    color: #fff;
    text-decoration: underline;
}

.button--primary.button--shadow.overlay__button:is(:hover, :focus-visible) {
    background: var(--primary-color--dark);
}

.overlay__infos p > a:is(:hover, :focus-visible) {
    color: var(--primary-color--dark);
}

@media only screen and (min-width: 840px) {
    .button--primary.button--shadow.overlay__button {
        font-size: 25px;
    }
}

.chapter--prev-next-nav-mobile {
    background: var(--primary-color);
}

.p-n-navigation {
    width: 55px;
    height: 55px;
    background: #fff;
    border-radius: 55px;
    z-index: 2;
    top: calc(50% - 130px);
}

.p-n-navigation__link:hover,
.p-n-navigation__link:focus {
    background: none;
}

.p-n-navigation--next {
    right: 74px;
}

.p-n-navigation--prev {
    left: 74px;
}

.p-n-navigation__link {
    background: none;
    width: 55px;
    height: 55px;
    display: block;
    transform: none !important;
}

.p-n-navigation__control {
    width: 55px;
    display: block;
    height: 55px;
}

.p-n-navigation__svg {
    display: none;
}

.p-n-navigation__control::before {
    display: block;
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: calc(50% + 4px);
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid #000;
    border-top: none;
    border-right: none;
}

.p-n-navigation--next .p-n-navigation__control::before {
    left: calc(50% - 4px);
    transform: translate(-50%, -50%) rotate(-135deg);
}

.p-n-navigation__thumb-wrapper {
    transition: opacity .5s ease-in-out;
}

@media only screen and (max-width: 839px) {
    .p-n-navigation {
        position: absolute;
        top: -80px;
    }

    .p-n-navigation,
    .p-n-navigation__control,
    .p-n-navigation__link {
        width: 45px;
        height: 45px;
    }

    .p-n-navigation__control::before {
        height: 18px;
        left: calc(50% + 4px);
        width: 18px;
    }

    .p-n-navigation--next .p-n-navigation__control::before {
        left: calc(50% - 4px);
    }

    .p-n-navigation--prev {
        left: 16px;
    }

    .p-n-navigation--next {
        right: 16px;
    }

    .chapter--prev-next-nav-mobile .p-n-navigation {
        top: 50%;
    }

    .p-n-navigation__thumb-wrapper {
        display: none;
    }

    .p-n-navigation__thumbnail {
        display: none;
    }
}

@media only screen and (min-width: 840px) {
    .chapter--prev-next-nav-mobile {
        display: none;
    }

    .p-n-navigation__link {
        overflow: visible !important;
    }

    .p-n-navigation__thumb-wrapper {
        position: absolute;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%);
        display: none;
    }

    [page-designation*="brand-page"] .p-n-navigation__thumb-wrapper {
        display: block;
    }

    .p-n-navigation__thumb-wrapper::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 15%), transparent, transparent);
    }

    .p-n-navigation__thumbnail {
        margin-top: 1rem;
        height: 6rem;
        width: 12rem;
        max-width: none;
        aspect-ratio: auto;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: center;
           object-position: center;
        padding: 0;
    }
}

@media only screen and (min-width: 1024px) {
       .p-n-navigation__thumb-wrapper {
        position: absolute;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%);
    }

    .p-n-navigation__thumbnail {
        margin-top: 2rem;
        height: 8rem;
        width: 14rem;
    }
}

.slider.slider--logo {
    padding: 0 2rem;
    width: calc(100% - 4rem);
}

.slider__control {
    width: 55px;
    height: 55px;
    background: var(--primary-color);
    border-radius: 55px;
}

.slider__control--prev {
    left: -40px;
}

.slider__control--next {
    right: -40px;
}

.slider__control::before {
    display: block;
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: calc(50% + 4px);
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
}

.slider__control.slider__control--next::before {
    transform: translate(-50%, -50%) rotate(-135deg);
    left: calc(50% - 4px);
}

.slider--logo .glider-dots,
.slider__control svg {
    display: none;
}

/* HEADER SLIDER */

.header .slider__control {
    background: #fff;
}

.header .slider__control::before {
    border: 2px solid var(--primary-color);
    border-top: none;
    border-right: none;
}

.header .slider__control--prev {
    left: 90px;
}

.header .slider__control--next {
    right: 90px;
}

/* CAREER SLIDER */

html[page-designation="career"] .slider::before,
html[page-designation="career"] .slider__control,
html[page-designation="career"] .slider__pagination {
    display: none;
}

html[page-designation="career"] .slider__frame.draggable {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

html[page-designation="career"] .slider__frame > div {
    visibility: visible;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 100%;
    box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
}

html[page-designation="career"] .slider__frame > div img {
    -o-object-fit: contain;
       object-fit: contain;
    height: 100%;
    padding: 30px;
    border-radius: 0;
    box-shadow: none;
}

@media only screen and (max-width: 599px) {
    .glider-dots {
        display: block;
        padding-bottom: 20px;
    }

    .glider-dot {
        height: 22px;
        width: 22px;
        margin: auto 16px;
        background: rgb(255 255 255 / 70%);
        box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
    }

    .glider-dot.active:hover,
    .glider-dot:hover,
    .glider-dot.active {
        width: 34px;
        height: 34px;
        background: #fff;
    }

    .slider--logo .slider__control {
        display: block;
        width: 33px;
        height: 33px;
    }

    .slider--logo .slider__control::before {
        width: 12px;
        height: 12px;
        left: calc(50% + 2px);
    }

    .slider--logo .slider__control--prev {
        left: -20px;
    }

    .slider--logo .slider__control--next {
        right: -20px;
    }

    .slider--logo .slider__control.slider__control--next::before {
        left: calc(50% - 2px);
    }
}

.text-columns__image img {
    border-radius: var(--border-radius);
}

.text-columns--3 .text-columns__column .text-columns__image img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.text-columns--3 .text-columns__column .text-columns__image {
    max-width: 440px;
    max-height: 522px;
    height: 100%;
    margin-bottom: 32px;
}

.text-columns--3 .text-columns__column .text-columns__image img,
.text-columns--3 .text-columns__column .text-columns__image picture {
    max-height: 522px;
}

@media only screen and (min-width: 1024px) and (max-width: 1179px) {
    .text-columns--3 .text-columns__column {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
}

@media only screen and (max-width: 599px) {
    .text-columns {
        gap: 20px;
    }

    .text-columns--3 .text-columns__column .text-columns__image {
        height: auto;
    }
}

.textpic__image img {
    border-radius: var(--border-radius);
}

.textpic.textpic--has-slider .textpic__image {
    height: -moz-fit-content !important;
    height: fit-content !important;
}

@media only screen and (min-width: 600px) {
    .textpic--inside .textpic__image {
        margin: 0 !important;
    }

    .textpic.textpic--beside.textpic--left .textpic__image,
    .textpic.textpic--beside.textpic--left .textpic__text {
        width: 100%;
    }
}

@media only screen and (min-width: 840px) {
    .textpic__text p {
        max-width: 650px;
    }

    .textpic--inside .textpic__image {
        margin: 0 !important;
    }

    .textpic.textpic--beside.textpic--left .textpic__image {
        width: 40%;
    }

    .textpic.textpic--beside.textpic--left .textpic__text {
        background: #fff;
        border-radius: var(--border-radius);
        margin-left: 75px;
        width: calc(60% - 75px);
    }

    #c254 + .grid .textpic {
        display: flex;
        align-items: center;
    }

    #c254 + .grid  .textpic .textpic__image {
        padding-top: 0;
    }

    .textpic--beside.textpic--right h1,
    .textpic--beside.textpic--right h2,
    .textpic--beside.textpic--right h3,
    .textpic--beside.textpic--right h4,
    .textpic--beside.textpic--right p {
        max-width: calc(40vw + 75px);
    }
}

@media only screen and (min-width: 1440px) {
    .textpic.textpic--beside.textpic--left .textpic__text {
        padding: 75px;
    }
}

@media only screen and (max-width: 599px) {
    .textpic {
        display: flex;
        flex-direction: column-reverse;
    }

    .textpic__image,
    .textpic__image picture {
        overflow: visible !important;
    }

    .textpic__image img {
        box-shadow: 12px 9px 54px rgb(0 0 0 / 16%);
    }
}

html[page-designation="sustainability"] .top-bar.top-bar--medium,
html[page-designation="sustainability"] .top-bar::before {
    background: #3E7337;
}

@media only screen and (min-width: 840px) {
    .top-bar.top-bar--medium,
    .top-bar::before {
        height: var(--top-bar-height);
        background: var(--primary-color);
        box-shadow: none;
    }

    .top-bar.top-bar--fixed,
    .top-bar--medium ~ .wrap--navigation,
    .top-bar--fixed ~ .wrap--navigation {
        height: var(--top-bar-height) !important;
    }
}

@media only screen and (max-width: 839px) {
    .wrap--content {
        padding-top: var(--top-bar-height);
    }

    .top-bar {
        flex-direction: row-reverse;
        border: none;
        height: var(--top-bar-height);
        background: var(--primary-color);
        padding-left: 58px;
    }

    /* noinspection CssUnknownTarget */
    .top-bar__title {
        height: 84px;
        max-height: 84px;
        width: 200px;
        background: var(--primary-color);
        border-radius: 110px;
        background-image: url("/fileadmin/Bilder/Logo/csm_EggersFranke_Logo-neu2_79b0536eb8_white--small.svg");
        background-size: 165px;
        background-position: center;
        background-repeat: no-repeat;
    }

    html[page-designation="sustainability"] .top-bar__title {
        background-color: #3E7337;
    }

    html[page-designation="sustainability"] #contact-state:checked ~ .top-bar .top-bar__toggle--contact,
    html[page-designation="sustainability"] #navigation-state:checked ~ .top-bar .top-bar__toggle--menu {
        background-color: #3E7337;
    }

    .top-bar__title img {
        height: 66px;
        position: absolute;
        left: 50%;
        top: .5rem;
        transform: translateX(-50%);
    }

    .top-bar__toggle--menu {
        padding: 0 30px 0 0;
    }

    .top-bar__toggle--contact {
        padding-left: 25px;
    }
}

.topbutton {
    background: var(--primary-color--dark);
}

toujou-card.toujou-card.toujou-card--product {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    gap: 0;
    border: none;
    border-bottom: 1px solid var(--primary-color);
    border-radius: 0;
    padding: 8px 16px;
}

.toujou-card__header {
    display: flex;
    padding: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

h3.toujou-card__brand {
    font-size: 20px;
    line-height: 28px;
    width: 25%;
    display: inline-block;
    margin: 0;
}

h3.toujou-card__title,
.toujou-card__header[no-subtitles] .toujou-card__title {
    display: inline-block;
    width: 35%;
}

.toujou-card--product .button--download {
    color: transparent;
    padding: 0;
}

.download-catalogue {
    width: 20%;
    text-align: center;
    position: absolute;
    right: 0;
}

.download-logo,
.download-bottle {
    width: 10%;
    text-align: center;
}

.download-logo {
    position: absolute;
    right: 20%;
}

.toujou-card--product .button--download::after {
    right: 50%;
    transform: translate(50%, -50%);
}

.toujou-card--product .button--download:hover::after {
    background-color: var(--primary-color--dark);
}

@media only screen and (max-width: 839px) {
    h3.toujou-card__brand {
        font-size: 16px;
    }

    h3.toujou-card__title {
        padding-left: 16px;
    }

    h3.toujou-card__title,
    h3.toujou-card__brand,
    .download-bottle,
    .download-logo,
    .download-catalogue {
        min-width: 180px;
        width: 180px !important;
    }

    toujou-card.toujou-card.toujou-card--product {
        width: auto;
        padding-left: 0;
    }

    .download-logo,
    .download-catalogue {
        position: relative;
        right: 0;
    }
}

.wrap--iframe main {
    margin: 0;
    padding: 0;
}

.wrap--content.wrap--iframe {
    padding: 10px 20px 20px;
}

toujou-modal {
    --toujou-modal-title-display: none;
    --toujou-modal-header-justify: flex-end;
    --toujou-modal-header-width: calc(100% - 16px);
    --toujou-modal-close-color: var(--primary-color);
    --toujou-modal-close-hover-border: none;
    --toujou-modal-close-border: none;
    --toujou-modal-close-background: transparent;
}

.wrap--iframe .indexedsearch-form__fieldset {
    margin-bottom: 0;
}

/* noinspection CssUnknownTarget */

@font-face {
    font-family: "Work Sans Light";
    src: url("/fileadmin/toujou/assets/1/fonts/Work_Sans_200.woff") format("woff");
}

/* noinspection CssUnknownTarget */

@font-face {
    font-family: "Work Sans Regular";
    src: url("/fileadmin/toujou/assets/1/fonts/Work_Sans_400.woff") format("woff");
}

h1, h2, h3, h4, h5 {
    letter-spacing: -1px;
    margin: 0 auto 16px;
    -webkit-hyphens: auto;
            hyphens: auto;
}

h1, .font--alpha,
h2, .font--beta,
h3, .font--gamma,
h4, .font--delta,
h5, .font--epsilon {
    font-size: 35px;
    line-height: 43px;
    color: #000;
    max-width: 1280px;
    margin: 0 0 30px;
}

html[page-designation="sustainability"] main h2 {
    color: #3E7337;
}

p, ul, ol {
    font-size: 18px;
    line-height: 25px;
}

table {
    border: none;
}

.page--id-9 table {
    border: 1px solid var(--font-color);
    margin: 0 auto 2rem;
}

tr:nth-child(even) td {
    background: none;
}

table .button {
    margin-bottom: 0;
}

table strong a {
    color: var(--font-color);
}

h2 + h2.subheadline {
    margin-top: -20px;
}

.link--arrow {
    font-weight: 700;
    position: relative;
    padding-right: 53px;
    display: block;
    width: -moz-fit-content;
    width: fit-content;
}

/* noinspection CssUnknownTarget */

.link--arrow::after {
    display: block;
    content: "";
    width: 43px;
    height: 43px;
    background-image: url("/fileadmin/Bilder/Icons/arrow-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

@media only screen and (min-width: 840px) {
    h1, .font--alpha,
    h2, .font--beta,
    h3, .font--gamma,
    h4, .font--delta,
    h5, .font--epsilon {
        font-size: 54px;
        line-height: 66px;
        margin-bottom: 40px;
    }

    h2 + h2.subheadline {
        margin-top: -30px;
    }

    p, ul, ol {
        font-size: 20px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 839px) {
    h2.subheadline {
        font-size: 17px;
        line-height: 26px;
        font-weight: 700;
    }

    .page--id-1 .chapter#initial .button {
        margin-bottom: 20px;
        margin-top: 24px;
    }
}