/* ===================================================================================== Page designs of the complete design set (09.10.2026): standards overview, documents, contact, online tools, registry, prices, events, shop, search, 404. Built from Design/drafts/approved/ (visual specification only, rules 6e). ===================================================================================== */ /* ------------------------------------------------------------------ compact page hero (Standards page 09.10.) */ .csi-page-hero--compact { min-height: max(460px, 58vh); } .csi-page-hero--compact .csi-page-hero__content { padding-top: calc(54px + var(--csi-header-h)); padding-bottom: 48px; gap: 20px; } /* ------------------------------------------------------------------ split hero (Standards overview) */ .csi-split-hero { position: relative; overflow: hidden; background: var(--csi-dark); color: var(--csi-white); } .csi-split-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; } .csi-split-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 39, 43, 0.82) 0%, rgba(29, 39, 43, 0.6) 55%, rgba(29, 39, 43, 0.35) 100%); } .csi-split-hero__inner { position: relative; padding-top: calc(50px + var(--csi-header-h)); padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 64px; align-items: end; } .csi-split-hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .csi-split-hero__title { font-size: clamp(36px, 4.6vw, 64px); font-weight: 600; line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; color: var(--csi-white); max-width: 14ch; } .csi-split-hero__side { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; } .csi-split-hero__intro { max-width: 44ch; font-size: 18px; line-height: 1.6; color: var(--csi-white); } /* ------------------------------------------------------------------ two pathway cards */ .csi-duo.csi-section--space-default { padding-block: 56px 120px; } .csi-duo__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; } .csi-duo__item { display: flex; min-width: 0; scroll-margin-top: calc(var(--csi-header-h, 84px) + 24px); } .csi-duo__card { flex: 1 1 auto; min-width: 0; min-height: 400px; padding: 40px; display: flex; flex-direction: column; gap: 16px; transition: transform 0.4s; } .csi-duo__card--light { background: var(--csi-white); color: var(--csi-dark); } .csi-duo__card--dark { background: var(--csi-dark); color: var(--csi-white); } a.csi-duo__card:hover, a.csi-duo__card:focus-visible { transform: translateY(-6px); } .csi-duo__card--light:hover { color: var(--csi-dark); } .csi-duo__card--dark:hover { color: var(--csi-white); } .csi-duo__kicker { color: var(--csi-green); } .csi-duo__card--dark .csi-duo__kicker { color: #7FD79C; } .csi-duo__title { font-size: clamp(26px, 2.4vw, 36px); text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; color: inherit; } .csi-duo__text { flex: 1 1 0%; font-size: 16px; line-height: 1.6; color: var(--csi-text-2); max-width: 48ch; } .csi-duo__card--dark .csi-duo__text { color: rgba(255, 255, 255, 0.86); } .csi-duo__button { align-self: flex-start; margin-top: 8px; padding: 12px 18px; font-size: 14.5px; gap: 10px; white-space: normal; } a.csi-duo__card:hover .csi-duo__button, a.csi-duo__card:focus-visible .csi-duo__button { border-radius: var(--csi-radius-hover); } .csi-duo__card--light:hover .csi-duo__button { background: var(--csi-green); } .csi-duo__card--dark:hover .csi-duo__button { background: var(--csi-white); color: var(--csi-dark); } .csi-duo__more { margin-top: 40px; display: flex; justify-content: center; } .csi-duo__more .csi-button { padding: 14px 24px; font-size: 15.5px; white-space: normal; } /* ------------------------------------------------------------------ process comparison */ .csi-compare.csi-section--space-default { padding-block: 144px; } .csi-compare__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px 80px; align-items: end; } .csi-compare__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .csi-compare__title { font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.045em; text-transform: uppercase; line-height: 0.98; max-width: 16ch; } .csi-compare__intro { font-size: 17px; color: var(--csi-text-3); max-width: 54ch; } .csi-compare__cols { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; } .csi-compare__col { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 32px; } .csi-compare__col--light { background: var(--csi-grey); color: var(--csi-dark); } .csi-compare__col--dark { background: var(--csi-dark); color: var(--csi-white); } .csi-compare__col-head { display: flex; align-items: center; gap: 16px; } .csi-compare__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--csi-green); box-shadow: 0 0 0 6px rgba(46, 151, 81, 0.14); display: flex; align-items: center; justify-content: center; } .csi-compare__col--dark .csi-compare__icon { box-shadow: 0 0 0 6px rgba(46, 151, 81, 0.22); } .csi-compare__icon img { width: 26px; height: 26px; } .csi-compare__kicker { display: block; color: var(--csi-green); } .csi-compare__col--dark .csi-compare__kicker { color: #7FD79C; } .csi-compare__col-title { margin-top: 4px; font-size: clamp(22px, 2vw, 28px); color: inherit; } .csi-compare__steps { list-style: none; display: flex; flex-direction: column; } .csi-compare__step { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(29, 39, 43, 0.14); } .csi-compare__step:last-child { padding-bottom: 0; } .csi-compare__col--dark .csi-compare__step { border-top-color: rgba(255, 255, 255, 0.16); } .csi-compare__illu { height: 104px; background: var(--csi-white); border: 1px solid rgba(29, 39, 43, 0.08); padding: 6px 4px; display: flex; align-items: center; justify-content: center; } .csi-compare__illu img { width: 100%; height: 100%; object-fit: contain; } .csi-compare__num { display: block; font-family: var(--csi-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; color: var(--csi-green); } .csi-compare__col--dark .csi-compare__num { color: #7FD79C; } .csi-compare__step-title { display: block; margin-top: 4px; font-family: var(--csi-font-display); font-weight: 600; font-size: 17px; } .csi-compare__step-text { margin-top: 6px; font-size: 15.5px; color: var(--csi-text-2); } .csi-compare__col--dark .csi-compare__step-text { color: rgba(255, 255, 255, 0.82); } .csi-compare__combined { margin-top: 20px; background: var(--csi-green); color: var(--csi-white); padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 32px; } .csi-compare__combined-head { display: flex; align-items: flex-start; gap: 20px; } .csi-compare__combined-icon { flex: 0 0 auto; width: 48px; height: 48px; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: flex; } .csi-compare__combined-icon img { width: 100%; height: 100%; object-fit: contain; } .csi-compare__combined-title { display: block; font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; } .csi-compare__combined-text { margin-top: 8px; font-size: 16.5px; max-width: 70ch; } .csi-compare__combined-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; } .csi-compare__card { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; } .csi-compare__card--light { background: var(--csi-white); color: var(--csi-dark); } .csi-compare__card--dark { background: var(--csi-dark); color: var(--csi-white); } .csi-compare__card .csi-kicker { color: var(--csi-green); } .csi-compare__card--dark .csi-kicker { color: #7FD79C; } .csi-compare__card-title { font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; } .csi-compare__card p { font-size: 15.5px; color: var(--csi-text-2); } .csi-compare__card--dark p { color: rgba(255, 255, 255, 0.86); } @media (max-width: 900px) { .csi-compare__cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .csi-compare.csi-section--space-default { padding-block: 88px; } .csi-compare__cols { margin-top: 48px; } .csi-compare__step { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } .csi-compare__illu { height: 80px; } } /* ------------------------------------------------------------------ CTA on a photo */ .csi-cta-photo { position: relative; overflow: hidden; background: var(--csi-dark); padding-block: 144px; } .csi-cta-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } .csi-cta-photo__shade { position: absolute; inset: 0; background: rgba(29, 39, 43, 0.7); } .csi-cta-photo__inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; } .csi-cta-photo__title { font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.045em; text-transform: uppercase; line-height: 0.98; color: var(--csi-white); max-width: 16ch; } .csi-cta-photo__text { margin-top: 18px; font-size: 18px; color: var(--csi-white); max-width: 48ch; } @media (max-width: 720px) { .csi-cta-photo { padding-block: 88px; } } /* ------------------------------------------------------------------ finder head (Standards page design 09.10.) */ .csi-finder__intro > .csi-eyebrow { padding: 9px 16px 9px 14px; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: 0.08em; } .csi-finder__intro > .csi-eyebrow::before { width: 8px; height: 8px; } .csi-finder__h2 { font-size: 47px; letter-spacing: -0.04em; } @media (max-width: 720px) { .csi-finder__h2 { font-size: 34px; } } /* ------------------------------------------------------------------ long German words never widen the page */ .csi-main { overflow-wrap: break-word; } html[lang^="de"] :is(.csi-duo, .csi-compare, .csi-split-hero, .csi-cta-photo) :is(p, h1, h2, h3, strong, small, .csi-kicker) { hyphens: auto; -webkit-hyphens: auto; } /* ------------------------------------------------------------------ short page hero, buttons right (Documents 09.10.) */ .csi-page-hero--short { min-height: clamp(340px, 42vh, 440px); } .csi-page-hero--short .csi-page-hero__content { padding-top: calc(36px + var(--csi-header-h)); padding-bottom: 48px; gap: 20px; } .csi-page-hero--short .csi-page-hero__title { font-size: clamp(30px, 4.6vw, 67px); } .csi-page-hero__row { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; } .csi-page-hero--buttons-right .csi-page-hero__intro { max-width: 46ch; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, 0.9); } .csi-page-hero--buttons-right .csi-page-hero__buttons { margin-top: 0; } /* ------------------------------------------------------------------ document groups (Documents) */ .csi-docgroups.csi-section--space-default { padding-block: 56px 144px; } .csi-docgroups__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; } .csi-docgroups__heading { display: flex; flex-direction: column; gap: 16px; max-width: 820px; align-items: flex-start; } .csi-docgroups__title { font-size: 56px; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; color: var(--csi-dark); } .csi-docgroups__list { margin-top: 40px; } .csi-docgroups__links { list-style: none; padding: 0 32px 44px 128px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; } .csi-docgroups__links li { display: flex; } .csi-docgroups__link { flex: 1 1 0%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--csi-white); color: var(--csi-dark); padding: 15px 18px; font-size: 15.5px; line-height: 1.4; transition: background var(--csi-t-fast), color var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-docgroups__link:hover, .csi-docgroups__link:focus-visible { background: var(--csi-dark); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-docgroups__label { display: flex; align-items: center; gap: 12px; } .csi-docgroups__icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--csi-green); } .csi-docgroups__arrow { flex: 0 0 auto; color: var(--csi-green); display: inline-flex; } .csi-docgroups__arrow svg { width: 18px; height: 18px; } .csi-docgroups__note { margin-top: 32px; font-size: 15px; color: var(--csi-text-3); } .csi-docgroups__note a { color: var(--csi-dark); border-bottom: 1px solid var(--csi-green); } @media (max-width: 720px) { .csi-docgroups__title { font-size: 38px; } .csi-docgroups__links { padding: 0 0 32px; } } /* ------------------------------------------------------------------ CTA without photo (dark band, Documents "Questions") */ .csi-cta-photo--plain { padding-block: 96px; } .csi-cta-photo--plain .csi-cta-photo__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 64px; align-items: end; } .csi-cta-photo--plain .csi-cta-photo__title { margin-top: 22px; font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.05em; line-height: 1; text-transform: none; max-width: none; } .csi-cta-photo--plain .csi-eyebrow--inverse { background: transparent; border-color: rgba(255, 255, 255, 0.22); backdrop-filter: none; } .csi-cta-photo__buttons { gap: 10px; } /* ------------------------------------------------------------------ split hero: breadcrumb, large title, text link (Contact) */ .csi-split-hero--crumbs .csi-split-hero__inner { padding-top: calc(110px + var(--csi-header-h)); padding-bottom: 96px; row-gap: 48px; } .csi-split-hero__crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14.5px; color: rgba(255, 255, 255, 0.75); } .csi-split-hero__crumbs a { color: var(--csi-white); } .csi-split-hero__crumbs a:hover { color: var(--csi-green-light); } .csi-split-hero--large .csi-split-hero__shade { background: linear-gradient(90deg, rgba(29, 39, 43, 0.78) 0%, rgba(29, 39, 43, 0.58) 50%, rgba(29, 39, 43, 0.4) 100%), linear-gradient(rgba(29, 39, 43, 0.45) 0%, rgba(29, 39, 43, 0) 35%, rgba(29, 39, 43, 0.5) 100%); } .csi-split-hero--large .csi-split-hero__title { font-size: clamp(52px, 8vw, 112px); letter-spacing: -0.055em; line-height: 0.95; text-transform: none; max-width: none; } .csi-split-hero--large .csi-split-hero__head { gap: 24px; } .csi-split-hero--large .csi-split-hero__intro { font-size: 19px; color: rgba(255, 255, 255, 0.88); max-width: 46ch; } .csi-split-hero--large .csi-split-hero__side { gap: 20px; } .csi-split-hero__link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--csi-font-display); font-weight: 500; font-size: 17px; color: var(--csi-white); border-bottom: 2px solid var(--csi-green); padding-bottom: 4px; } .csi-split-hero__link svg { width: 18px; height: 18px; } .csi-split-hero__link:hover { color: var(--csi-green-light); } @media (max-width: 720px) { .csi-split-hero--crumbs .csi-split-hero__inner { padding-top: calc(48px + var(--csi-header-h)); padding-bottom: 64px; row-gap: 32px; } } /* ------------------------------------------------------------------ contact page body */ .csi-contact-main.csi-section--space-default { padding-block: 72px 144px; } .csi-contact-main__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; } .csi-contact-main__card { min-width: 0; background: var(--csi-white); padding: 56px; box-shadow: 0 30px 60px -44px rgba(29, 39, 43, 0.45); } .csi-contact-main__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--csi-line); } .csi-contact-main__title { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.035em; } .csi-contact-main__note { font-size: 13.5px; color: var(--csi-text-3); } .csi-contact-main__star { color: var(--csi-green); } .csi-contact-main__aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .csi-contact-main__office { background: var(--csi-dark); color: var(--csi-white); padding: 40px 36px; display: flex; flex-direction: column; gap: 28px; align-items: stretch; } .csi-contact-main__office .csi-eyebrow { align-self: flex-start; background: transparent; border-color: rgba(255, 255, 255, 0.18); backdrop-filter: none; } .csi-contact-main__name { font-family: var(--csi-font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; } .csi-contact-main__address { margin-top: 10px; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); } .csi-contact-main__lines { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.12); } .csi-contact-main__line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); color: var(--csi-white); } .csi-contact-main__line:hover { color: var(--csi-green-light); } .csi-contact-main__line > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .csi-contact-main__line svg { flex: 0 0 auto; width: 18px; height: 18px; } .csi-contact-main__label { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .csi-contact-main__value { font-size: 17px; overflow-wrap: anywhere; } .csi-contact-main__social { list-style: none; display: flex; gap: 18px; font-family: var(--csi-font-display); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; } .csi-contact-main__social a { color: var(--csi-white); } .csi-contact-main__social a:hover { color: var(--csi-green-light); } .csi-contact-main__news { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 32px 36px; overflow: hidden; color: var(--csi-white); background: var(--csi-dark); } .csi-contact-main__news:hover { color: var(--csi-white); } .csi-contact-main__news-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; } .csi-contact-main__news:hover .csi-contact-main__news-img { transform: scale(1.04); } .csi-contact-main__news-shade { position: absolute; inset: 0; background: linear-gradient(rgba(29, 39, 43, 0) 20%, rgba(29, 39, 43, 0.85) 100%); } .csi-contact-main__news-kicker { position: relative; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .csi-contact-main__news-title { position: relative; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--csi-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; line-height: 1.15; } .csi-contact-main__news-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--csi-green); display: flex; align-items: center; justify-content: center; } .csi-contact-main__news-arrow svg { width: 18px; height: 18px; } /* form on the contact page: rows title | first + family name | company + country | e-mail + phone | how heard | message */ .csi-contact-form--page { max-width: none; } .csi-contact-form--page .fluentform .ff-el-group { margin-bottom: 24px; } .csi-contact-form--page .ff_list_inline .ff-el-form-check { margin: 0 8px 0 0; } .csi-contact-form--page .ff_list_inline .ff-el-form-check-label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; padding: 13px 22px; border: 1px solid rgba(29, 39, 43, 0.2); background: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; color: var(--csi-dark); cursor: pointer; transition: background var(--csi-t-fast), color var(--csi-t-fast), border-color var(--csi-t-fast); } .csi-contact-form--page .ff_list_inline .ff-el-form-check-input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .csi-contact-form--page .ff_list_inline .ff-el-form-check-label:has(input:checked) { background: var(--csi-dark); border-color: var(--csi-dark); color: var(--csi-white); } .csi-contact-form--page .ff_list_inline .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--csi-green); outline-offset: 2px; } @media (min-width: 900px) { .csi-contact-form--page .fluentform fieldset { column-gap: 24px; } .csi-contact-form--page .fluentform fieldset > .ff-name-field-wrapper .ff-t-container { gap: 24px; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="company"]) { grid-column: 1; grid-row: 3; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="country"]) { grid-column: 2; grid-row: 3; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="email"]) { grid-column: 1; grid-row: 4; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="phone"]) { grid-column: 2; grid-row: 4; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="how_heard"]) { grid-column: 1; grid-row: 5; } .csi-contact-form--page .fluentform fieldset > .ff-el-group:has([name="message"]) { grid-column: 1 / -1; grid-row: 6; } } @media (max-width: 1024px) { .csi-contact-main__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .csi-contact-main.csi-section--space-default { padding-block: 48px 88px; } .csi-contact-main__card { padding: 28px 20px; } .csi-contact-main__office { padding: 32px 24px; } } .csi-contact-form--page .ff-el-input--label label { font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; } .csi-contact-form--page .ff-el-is-required.asterisk-right label::after { color: var(--csi-green); } .csi-contact-form--page .fluentform .ff-el-form-control, .csi-contact-form--page .fluentform select.ff-el-form-control { padding: 14px 16px; border-color: rgba(29, 39, 43, 0.2); } .csi-contact-form--page .ff-btn-submit { padding: 17px 30px !important; font-size: 16px; } /* ------------------------------------------------------------------ split hero with step boxes (Online tools) */ .csi-split-hero--cards .csi-split-hero__inner { padding-top: calc(54px + var(--csi-header-h)); padding-bottom: 64px; row-gap: 24px; } .csi-split-hero--cards .csi-split-hero__shade { background: linear-gradient(90deg, rgba(29, 39, 43, 0.55) 0%, rgba(29, 39, 43, 0.25) 60%, rgba(29, 39, 43, 0.4) 100%), linear-gradient(rgba(29, 39, 43, 0.8) 0%, rgba(29, 39, 43, 0.6) 40%, rgba(29, 39, 43, 0.7) 70%, rgba(29, 39, 43, 0.92) 100%); } .csi-split-hero--cards .csi-split-hero__head { gap: 18px; } .csi-split-hero--cards .csi-split-hero__title { font-size: clamp(34px, 4vw, 56px); max-width: none; } .csi-split-hero--cards .csi-split-hero__side { justify-self: end; } .csi-split-hero--cards .csi-split-hero__intro { font-weight: 500; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); } .csi-split-hero__cards { grid-column: 1 / -1; margin-top: 16px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; } .csi-split-hero__card { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; background: rgba(29, 39, 43, 0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.16); border-top: 3px solid var(--csi-green); } .csi-split-hero__num { font-family: var(--csi-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; color: #7FD79C; } .csi-split-hero__card-title { font-size: 20px; color: var(--csi-white); letter-spacing: -0.02em; } .csi-split-hero__card p { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); } /* ------------------------------------------------------------------ tool list (Online tools) */ .csi-toollist.csi-section--space-default { padding-block: var(--csi-section-y); } .csi-toollist__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; } .csi-toollist__title { font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.05em; line-height: 1; color: var(--csi-dark); } .csi-toollist__intro { justify-self: end; max-width: 44ch; font-size: 17px; color: var(--csi-text-3); } .csi-toollist__list { margin-top: 72px; list-style: none; border-top: 1px solid var(--csi-dark); } .csi-toollist__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding: 36px 0; border-bottom: 1px solid rgba(29, 39, 43, 0.14); } .csi-toollist__mark { flex: 0 0 auto; display: flex; align-items: center; gap: 28px; } .csi-toollist__num { width: 28px; font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.08em; color: var(--csi-green); } .csi-toollist__logo { width: 64px; height: 64px; object-fit: contain; } .csi-toollist__body { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .csi-toollist__kicker { color: var(--csi-text-3); } .csi-toollist__name { font-size: clamp(24px, 2.4vw, 32px); color: var(--csi-dark); letter-spacing: -0.03em; line-height: 1.1; } .csi-toollist__text { max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--csi-text-3); text-wrap: pretty; } .csi-toollist__buttons { flex: 0 0 auto; width: 240px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; } .csi-toollist__button { width: 100%; height: 48px; justify-content: space-between; padding: 0 16px; font-size: 15px; } .csi-toollist__button.csi-button--ghost { border-color: rgba(29, 39, 43, 0.35); color: var(--csi-dark); } @media (max-width: 720px) { .csi-toollist__list { margin-top: 48px; } .csi-toollist__row { padding: 28px 0; } } /* ------------------------------------------------------------------ product hero (Registry) */ .csi-product-hero { position: relative; overflow: hidden; background: var(--csi-dark); color: var(--csi-white); } .csi-product-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .csi-product-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 39, 43, 0.88) 0%, rgba(29, 39, 43, 0.7) 50%, rgba(29, 39, 43, 0.45) 100%); } .csi-product-hero__inner { position: relative; padding-top: calc(110px + var(--csi-header-h)); padding-bottom: 128px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 64px; align-items: center; } .csi-product-hero__text { display: flex; flex-direction: column; align-items: flex-start; } .csi-product-hero__title { margin-top: 28px; font-size: clamp(38px, 4.8vw, 72px); font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; color: var(--csi-white); } .csi-product-hero__accent { display: block; color: var(--csi-green-light); } .csi-product-hero__line { display: block; } .csi-product-hero__intro { margin-top: 28px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 52ch; } .csi-product-hero__buttons { margin-top: 40px; } .csi-product-hero__screen { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(0deg, transparent 0%, #000 16%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%), linear-gradient(0deg, transparent 0%, #000 16%); -webkit-mask-composite: source-in; mask-composite: intersect; } .csi-product-hero__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; } @media (max-width: 720px) { .csi-product-hero__inner { padding-top: calc(48px + var(--csi-header-h)); padding-bottom: 72px; gap: 40px; } } /* ------------------------------------------------------------------ feature columns (Registry) */ .csi-features.csi-section--space-default { padding-block: 96px; } .csi-features--numbered .csi-features__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 32px; } .csi-features--numbered .csi-features__item { padding: 32px 32px 8px 0; border-top: 1px solid rgba(29, 39, 43, 0.18); display: flex; flex-direction: column; gap: 14px; } .csi-features__num { font-family: var(--csi-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: #237C41; } .csi-features__title { margin-top: 24px; font-size: clamp(22px, 1.9vw, 28px); text-transform: uppercase; letter-spacing: -0.03em; color: var(--csi-dark); } .csi-features__text { font-size: 16px; line-height: 1.6; color: var(--csi-text-2); max-width: 30ch; } .csi-features--values.csi-section--space-default { padding-block: 0; border-bottom: 1px solid rgba(29, 39, 43, 0.1); } .csi-features--values .csi-container { max-width: var(--csi-container); padding-inline: 0; } .csi-features--values .csi-features__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .csi-features--values .csi-features__item { padding: 48px 32px; border-right: 1px solid rgba(29, 39, 43, 0.12); } .csi-features--values .csi-features__item:last-child { border-right: 0; } .csi-features__label { font-family: var(--csi-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #237C41; } .csi-features--values .csi-features__text { margin-top: 12px; max-width: 34ch; } @media (max-width: 720px) { .csi-features.csi-section--space-default { padding-block: 64px; } .csi-features--values .csi-features__item { border-right: 0; border-bottom: 1px solid rgba(29, 39, 43, 0.12); padding: 32px 20px; } } /* ------------------------------------------------------------------ numbered paragraphs (Registry) */ .csi-numtext__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 96px; align-items: start; } .csi-numtext__head { position: sticky; top: calc(var(--csi-header-h) + 46px); } .csi-numtext__title { margin-top: 20px; font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.05em; line-height: 1; color: var(--csi-dark); } .csi-numtext__list { list-style: none; display: flex; flex-direction: column; } .csi-numtext__item { padding: 32px 0; border-top: 1px solid rgba(29, 39, 43, 0.14); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; } .csi-numtext__item:last-child { border-bottom: 1px solid rgba(29, 39, 43, 0.14); } .csi-numtext__num { font-family: var(--csi-font-display); font-size: 13px; font-weight: 600; color: var(--csi-green); } .csi-numtext__item p { font-size: 18px; line-height: 1.65; color: var(--csi-text-2); } @media (max-width: 900px) { .csi-numtext__head { position: static; } } /* ------------------------------------------------------------------ centered CTA on a photo (Registry) */ .csi-cta-photo--center { padding-block: 144px 160px; } .csi-cta-photo--center .csi-cta-photo__shade { background: rgba(29, 39, 43, 0.66); } .csi-cta-photo--center .csi-cta-photo__img { object-position: center; } .csi-cta-photo--center .csi-cta-photo__inner { max-width: calc(980px + 2 * var(--csi-gutter, 32px)); margin-inline: auto; flex-direction: column; align-items: center; text-align: center; gap: 0; } .csi-cta-photo--center .csi-cta-photo__inner > div:first-child { display: flex; flex-direction: column; align-items: center; } .csi-cta-photo__icon { height: 40px; width: auto; } .csi-cta-photo--center .csi-cta-photo__title { margin-top: 36px; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.045em; line-height: 1; text-transform: none; max-width: none; } .csi-cta-photo--center .csi-cta-photo__text { margin-top: 20px; font-family: var(--csi-font-display); font-weight: 300; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; max-width: 40ch; } .csi-cta-photo--center .csi-cta-photo__buttons { margin-top: 40px; justify-content: center; } @media (max-width: 720px) { .csi-cta-photo--center { padding-block: 88px 96px; } } /* ------------------------------------------------------------------ document rows (Prices) */ .csi-docrows.csi-section--space-default { padding-block: 96px 144px; } .csi-docrows__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; } .csi-docrows__heading { display: flex; flex-direction: column; gap: 16px; max-width: 820px; align-items: flex-start; } .csi-docrows__title { font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; color: var(--csi-dark); } .csi-docrows .csi-eyebrow { border-color: rgba(29, 39, 43, 0.18); } .csi-docrows__intro { font-size: 16px; color: var(--csi-text-2); max-width: 42ch; } .csi-docrows__list { list-style: none; margin-top: 40px; border-bottom: 1px solid rgba(29, 39, 43, 0.18); } .csi-docrows__list li { border-top: 1px solid rgba(29, 39, 43, 0.18); } .csi-docrows__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; color: var(--csi-dark); transition: background var(--csi-t-fast), color var(--csi-t-fast); } .csi-docrows__row:hover, .csi-docrows__row:focus-visible { background: var(--csi-dark); color: var(--csi-white); } .csi-docrows__num { font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.04em; line-height: 1; color: var(--csi-green); } .csi-docrows__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .csi-docrows__name { font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -0.03em; line-height: 1.15; text-transform: uppercase; } .csi-docrows__meta { font-size: 14.5px; opacity: 0.75; } .csi-docrows__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid; display: flex; align-items: center; justify-content: center; opacity: 0.8; } .csi-docrows__icon svg { width: 20px; height: 20px; } @media (max-width: 720px) { .csi-docrows__row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 22px 8px; } } /* ------------------------------------------------------------------ feature with image (Prices calculator) */ .csi-mfeature.csi-section--space-default { padding-block: 96px; } .csi-mfeature__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px 72px; align-items: center; } .csi-mfeature__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } .csi-mfeature .csi-eyebrow { border-color: rgba(29, 39, 43, 0.16); } .csi-mfeature__title { font-size: clamp(34px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; color: var(--csi-dark); } .csi-mfeature__lead { font-size: 19px; line-height: 1.55; color: var(--csi-dark); max-width: 48ch; } .csi-mfeature__points { list-style: none; align-self: stretch; display: flex; flex-direction: column; border-top: 1px solid rgba(29, 39, 43, 0.14); } .csi-mfeature__points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(29, 39, 43, 0.14); font-size: 16px; color: var(--csi-text-2); } .csi-mfeature__num { font-family: var(--csi-font-display); font-weight: 600; color: var(--csi-green); } .csi-mfeature .csi-buttons { margin-top: 6px; } .csi-mfeature__media { display: block; border: 4px solid var(--csi-green); border-radius: 20px; overflow: hidden; background: var(--csi-sand); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } a.csi-mfeature__media:hover { transform: translateY(-4px); } .csi-mfeature__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; } /* ================================================================ Events page (design "Carbon Standards Events", 09.10.2026) */ .csi-news-hero--compact { min-height: clamp(360px, 46vh, 500px); } .csi-news-hero--compact .csi-page-hero__content { gap: 22px; padding-top: calc(46px + var(--csi-header-h)); padding-bottom: 48px; } @media (max-width: 720px) { .csi-news-hero--compact .csi-page-hero__content { padding-top: calc(36px + var(--csi-header-h)); padding-bottom: 32px; } } .csi-news-hero--compact .csi-news-hero__title { font-size: clamp(48px, 8vw, 120px); } .csi-news-hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* next event */ .csi-event-next { background: var(--csi-sand); padding: 48px 0; } .csi-event-next__card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); background: var(--csi-white); color: var(--csi-dark); } .csi-event-next__media { position: relative; min-height: 300px; background: var(--csi-dark); } .csi-event-next__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .csi-event-next__media--contain img { object-fit: contain; } /* graphics with text: whole image on its own background colour */ .csi-event-next__date { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; background: var(--csi-green); color: var(--csi-white); } .csi-event-next__day { font-family: var(--csi-font-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.04em; } .csi-event-next__month, .csi-event-row__month { font-size: 12px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; } .csi-event-next__body { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(24px, 3vw, 40px); } .csi-event-next__body > :not(.csi-event-next__facts):not(.csi-event-next__actions) { align-self: flex-start; } .csi-event-next__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.035em; color: var(--csi-dark); margin-top: -14px; } .csi-event-next__text { font-size: 16px; color: var(--csi-text-3); max-width: 52ch; margin-top: -14px; } .csi-event-next__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; padding-top: 20px; border-top: 1px solid var(--csi-line); } .csi-event-next__facts dt { font-size: 11.5px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; color: var(--csi-text-3); } .csi-event-next__facts dd { margin: 4px 0 0; font-family: var(--csi-font-display); font-weight: 500; font-size: 15.5px; } .csi-event-next__actions, .csi-event-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .csi-event__cal { font-family: var(--csi-font-display); font-weight: 500; font-size: 14.5px; color: var(--csi-dark); border-bottom: 1px solid var(--csi-green); padding-bottom: 2px; white-space: nowrap; } .csi-event__cal:hover { color: var(--csi-green); } /* upcoming list */ .csi-events.csi-section--space-default { padding: 72px 0 120px; } .csi-events__head, .csi-past__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; } .csi-events__title, .csi-past__title { font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.045em; line-height: 1.08; color: var(--csi-dark); } .csi-evchips { display: flex; flex-wrap: wrap; gap: 8px; } .csi-evchip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(29, 39, 43, 0.28); background: transparent; color: var(--csi-dark); font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; cursor: pointer; transition: border-radius var(--csi-t-radius), border-color var(--csi-t-fast); } .csi-evchip span { opacity: 0.6; font-size: 12px; } .csi-evchip:hover { border-color: var(--csi-dark); border-radius: var(--csi-radius-hover); } .csi-evchip.is-active { background: var(--csi-dark); border-color: var(--csi-dark); color: var(--csi-white); } .csi-events__list { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .csi-event-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; background: var(--csi-white); padding: 24px 28px 24px 24px; transition: box-shadow 0.3s, transform 0.3s; } .csi-event-row[hidden] { display: none; } .csi-event-row:hover { box-shadow: 0 18px 40px -24px rgba(29, 39, 43, 0.35); transform: translateY(-2px); } .csi-event-row__date { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 24px; border-right: 1px solid var(--csi-line); } .csi-event-row__day { font-family: var(--csi-font-display); font-weight: 600; font-size: 34px; line-height: 1; letter-spacing: -0.04em; color: var(--csi-dark); white-space: nowrap; } .csi-event-row__month { color: var(--csi-green); } .csi-event-row__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .csi-event-row__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; color: var(--csi-text-3); } .csi-event-row__type { color: var(--csi-green); } .csi-event-row__title { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -0.025em; color: var(--csi-dark); } .csi-event-row__text { font-size: 15px; line-height: 1.55; color: var(--csi-text-3); max-width: 70ch; } .csi-event-row__actions { flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px 20px; } .csi-event-row__actions .csi-button { padding: 12px 20px; font-size: 14.5px; white-space: nowrap; } .csi-event-row__actions .csi-event__cal { font-size: 13.5px; padding-bottom: 1px; } .csi-events__none { margin-top: 40px; padding: 40px 32px; background: var(--csi-white); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .csi-events__none[hidden] { display: none; } .csi-events__none p { font-size: 16px; color: var(--csi-text-3); } .csi-events__reset { background: transparent; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--csi-green); font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; color: var(--csi-dark); cursor: pointer; } .csi-events__empty { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); background: var(--csi-white); } .csi-events__empty-main { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .csi-events__empty-main p { font-size: 16px; color: var(--csi-text-3); max-width: 46ch; } .csi-events__empty-main .csi-button { margin-top: 8px; } .csi-events__empty-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: var(--csi-dark); } .csi-events__empty-side { padding: clamp(28px, 4vw, 48px); background: var(--csi-dark); color: var(--csi-white); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; } .csi-events__empty-side .csi-kicker { color: #7FD79C; } .csi-events__empty-side p { font-family: var(--csi-font-display); font-weight: 500; font-size: 20px; line-height: 1.35; } .csi-events__empty-link { margin-top: 6px; font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; color: var(--csi-white); border-bottom: 1px solid var(--csi-green); padding-bottom: 2px; } .csi-events__empty-link:hover { color: #7FD79C; } /* past events */ .csi-past.csi-section--space-default { padding: 120px 0; } .csi-past__heading { display: flex; flex-direction: column; gap: 12px; } .csi-past__intro { font-size: 16.5px; color: var(--csi-text-3); max-width: 52ch; } .csi-past__years { display: flex; flex-wrap: wrap; gap: 8px 28px; border-bottom: 1px solid var(--csi-line); } .csi-past__years button { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--csi-text-3); font-family: var(--csi-font-display); font-weight: 500; font-size: 17px; cursor: pointer; } .csi-past__years button span { font-size: 12px; font-weight: 500; opacity: 0.6; } .csi-past__years button:hover { color: var(--csi-dark); } .csi-past__years button.is-active { border-bottom-color: var(--csi-green); color: var(--csi-dark); font-weight: 600; } .csi-past__grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; } .csi-past__item[hidden] { display: none; } .csi-past__card { height: 100%; display: flex; flex-direction: column; background: var(--csi-grey); color: var(--csi-dark); transition: transform 0.35s, box-shadow 0.35s; } .csi-past__card:hover { color: var(--csi-dark); transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(29, 39, 43, 0.4); } .csi-past__media { position: relative; display: block; height: 210px; background: var(--csi-dark); overflow: hidden; } .csi-past__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .csi-past__year { position: absolute; left: 0; bottom: 0; background: var(--csi-white); color: var(--csi-dark); padding: 8px 14px; font-family: var(--csi-font-display); font-weight: 600; font-size: 14px; } .csi-past__body { flex: 1 1 0%; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .csi-past__name { display: block; font-family: var(--csi-font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.025em; } .csi-past__text { font-size: 15px; line-height: 1.55; color: var(--csi-text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .csi-past__cta { margin-top: auto; padding-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--csi-font-display); font-weight: 500; font-size: 14.5px; border-bottom: 1px solid var(--csi-green); padding-bottom: 2px; } /* tiles: section title + sand / outline tones ("Stay in the loop") */ .csi-tiles__title { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 48px; } .csi-section--bg-dark .csi-tiles__title { color: var(--csi-white); } .csi-tiles.csi-section--bg-dark.csi-section--space-default { padding: 120px 0; } .csi-tile--sand .csi-tile__inner { background: var(--csi-sand); color: var(--csi-dark); } .csi-tile--sand .csi-tile__kicker { color: var(--csi-green); } .csi-tile--sand .csi-tile__text { color: var(--csi-text-2); } .csi-tile--sand .csi-tile__arrow { background: var(--csi-dark); color: var(--csi-white); } .csi-tile--sand a.csi-tile__inner:hover { color: var(--csi-dark); } .csi-tile--sand a.csi-tile__inner:hover .csi-tile__arrow { background: var(--csi-green); } .csi-tile--outline .csi-tile__inner { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); } .csi-tile--outline .csi-tile__kicker { color: #7FD79C; } .csi-tile--outline .csi-tile__text { color: rgba(255, 255, 255, 0.74); } .csi-tile--outline .csi-tile__arrow { background: var(--csi-green); color: var(--csi-white); } .csi-tile--outline a.csi-tile__inner:hover { border-color: rgba(255, 255, 255, 0.5); } .csi-tile--outline a.csi-tile__inner:hover .csi-tile__arrow { background: var(--csi-white); color: var(--csi-dark); } @media (max-width: 860px) { .csi-event-row { grid-template-columns: 88px minmax(0, 1fr); } .csi-event-row__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } } @media (max-width: 720px) { .csi-events.csi-section--space-default, .csi-past.csi-section--space-default, .csi-tiles.csi-section--bg-dark.csi-section--space-default { padding: 72px 0; } } @media (max-width: 720px) { html[lang^="de"] .csi-news-hero--compact .csi-news-hero__title { font-size: clamp(32px, 8.6vw, 48px); } } /* "VERANSTALTUNGEN" fits 390 px */ /* ================================================================ Shop + device pages (design "Carbon Standards Shop", 09.10.2026) */ .csi-badgestrip { border-bottom: 1px solid rgba(29, 39, 43, 0.1); } .csi-badgestrip.csi-section--space-default, .csi-badgestrip.csi-section--space-compact { padding: 0; } .csi-badgestrip__inner { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; } .csi-badgestrip__badge { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .csi-badgestrip__icon { width: 56px; height: 56px; background: var(--csi-green); color: var(--csi-white); display: flex; align-items: center; justify-content: center; } .csi-badgestrip__label { font-family: var(--csi-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-dark); line-height: 1.5; } .csi-badgestrip__label span { color: var(--csi-green); } .csi-badgestrip__text { flex: 1 1 420px; font-size: 17px; color: var(--csi-text-2); max-width: 70ch; } .csi-products.csi-section--space-default { padding: 120px 0 144px; } .csi-products__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; } .csi-products__title { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--csi-dark); } .csi-products__intro { margin-top: 14px; font-size: 17px; color: var(--csi-text-3); max-width: 48ch; } .csi-products__count { font-family: var(--csi-font-display); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--csi-text-3); } .csi-products__grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; } .csi-product { display: flex; flex-direction: column; background: var(--csi-grey); transition: box-shadow 0.25s, transform 0.25s; } .csi-product:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(29, 39, 43, 0.4); } .csi-product__body { flex: 1 1 0%; padding: 32px; display: flex; flex-direction: column; gap: 12px; } .csi-product__num { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-text-3); } .csi-product__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--csi-dark); } .csi-product__text { font-size: 15.5px; line-height: 1.55; color: var(--csi-text-2); } .csi-product__button { margin-top: auto; align-self: flex-start; } .csi-pslider { position: relative; aspect-ratio: 4 / 3; background: var(--csi-white); border: 1px solid rgba(29, 39, 43, 0.08); overflow: hidden; } .csi-pslider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 28px 28px 72px; opacity: 0; transition: opacity 0.3s; } .csi-pslider__img.is-active { opacity: 1; } .csi-pslider__badge { position: absolute; top: 16px; left: 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--csi-white); background: var(--csi-green); padding: 5px 10px; } .csi-pslider__bar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .csi-pslider__count { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-text-2); background: rgba(255, 255, 255, 0.9); padding: 6px 10px; font-variant-numeric: tabular-nums; } .csi-pslider__nav { display: flex; gap: 6px; } .csi-pslider__btn { width: 40px; height: 40px; border: 1px solid rgba(29, 39, 43, 0.2); background: var(--csi-white); color: var(--csi-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--csi-t-fast), color var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-pslider__btn svg { width: 16px; height: 16px; } .csi-pslider__btn--next { border-color: var(--csi-green); background: var(--csi-green); color: var(--csi-white); } .csi-pslider__btn:hover { border-radius: var(--csi-radius-hover); background: var(--csi-dark); border-color: var(--csi-dark); color: var(--csi-white); } .csi-pdetail__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px; align-items: start; } .csi-pdetail__media { position: sticky; top: calc(var(--csi-header-h) + 24px); } .csi-pdetail__body { display: flex; flex-direction: column; gap: 32px; } .csi-pdetail__text h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; } .csi-pdetail__points { background: var(--csi-grey); padding: 32px; } .csi-pdetail__points h3 { font-size: 20px; margin-bottom: 16px; } .csi-pdetail__points ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .csi-pdetail__points li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--csi-text-2); } .csi-pdetail__points li span { flex: none; width: 22px; height: 22px; background: var(--csi-green); color: var(--csi-white); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .csi-pdetail__points li svg { width: 14px; height: 14px; } @media (max-width: 900px) { .csi-pdetail__inner { grid-template-columns: minmax(0, 1fr); } .csi-pdetail__media { position: static; } } @media (max-width: 720px) { .csi-products.csi-section--space-default { padding: 72px 0; } .csi-products__grid { margin-top: 40px; } .csi-badgestrip__inner { padding-top: 32px; padding-bottom: 32px; } } /* ================================================================ Search results (design "CS Search Results", 09.10.2026) */ .csi-search-hero { position: relative; overflow: hidden; background: var(--csi-dark); color: var(--csi-white); padding: 176px 0 80px; } .csi-search-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .csi-search-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 39, 43, 0.86) 0%, rgba(29, 39, 43, 0.62) 55%, rgba(29, 39, 43, 0.4) 100%); } .csi-search-hero__inner { position: relative; } .csi-search-hero__title { margin-top: 40px; font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.04em; line-height: 1.05; color: var(--csi-white); max-width: 22ch; overflow-wrap: anywhere; } .csi-search-hero__title span { color: #7FD79C; } .csi-search-big { margin-top: 44px; max-width: 760px; display: flex; align-items: stretch; background: var(--csi-white); border: 1px solid var(--csi-white); } .csi-search-big__field { flex: 1 1 0%; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 20px; color: var(--csi-text-3); } .csi-search-big__field svg { width: 20px; height: 20px; flex: none; } .csi-search-big input { border: 0; background: transparent; outline: none; font-family: var(--csi-font-body); font-size: 18px; color: var(--csi-dark); width: 100%; padding: 18px 0; } .csi-search-big button { flex: 0 0 auto; border: 0; background: var(--csi-green); color: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 15.5px; padding: 0 30px; cursor: pointer; transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-search-big button:hover { background: var(--csi-dark); } .csi-search-results { background: var(--csi-sand); color: var(--csi-dark); padding: 72px 0 144px; } .csi-search-results__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid rgba(29, 39, 43, 0.14); } .csi-search-results__list li { border-top: 1px solid rgba(29, 39, 43, 0.14); } .csi-search-result { display: grid; grid-template-columns: 56px minmax(0, 1fr) 46px; gap: 24px; align-items: center; padding: 32px 24px; color: var(--csi-dark); transition: background 0.2s; } .csi-search-result:hover { background: var(--csi-white); color: var(--csi-dark); } .csi-search-result__num { align-self: start; padding-top: 6px; font-family: var(--csi-font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; color: var(--csi-text-3); } .csi-search-result__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .csi-search-result__title { font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -0.025em; } .csi-search-result__title mark { background: none; color: var(--csi-green); } .csi-search-result__sub { font-size: 16.5px; line-height: 1.55; color: var(--csi-text-3); max-width: 70ch; } .csi-search-result__arrow { width: 46px; height: 46px; background: var(--csi-dark); color: var(--csi-white); display: flex; align-items: center; justify-content: center; transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-search-result__arrow svg { width: 18px; height: 18px; } .csi-search-result:hover .csi-search-result__arrow { background: var(--csi-green); border-radius: var(--csi-radius-hover); } .csi-pager { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .csi-pager a, .csi-pager span { min-width: 46px; height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; } .csi-pager a { background: var(--csi-white); color: var(--csi-dark); transition: background var(--csi-t-fast), color var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-pager a[aria-current] { background: var(--csi-green); color: var(--csi-white); } .csi-pager a:hover { background: var(--csi-dark); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-pager span { color: var(--csi-text-3); padding: 0; width: 46px; min-width: 0; } .csi-search-results__none { padding: 24px 0 48px; max-width: 60ch; } .csi-search-results__none h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.035em; } .csi-search-results__none p { margin-top: 16px; font-size: 17px; color: var(--csi-text-3); } @media (max-width: 720px) { .csi-search-hero { padding: calc(36px + var(--csi-header-h)) 0 56px; } .csi-search-result { grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 14px; padding: 24px 8px; } .csi-search-result__arrow { width: 40px; height: 40px; } .csi-search-big button { padding: 0 18px; } .csi-search-results { padding: 48px 0 88px; } } /* ================================================================ 404 (design "Carbon Standards 404", 09.10.2026) */ .csi-404 { position: relative; min-height: min(62vh, 640px); background: var(--csi-dark); color: var(--csi-white); overflow: hidden; display: flex; } .csi-404__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .csi-404__shade { position: absolute; inset: 0; background: linear-gradient(rgba(29, 39, 43, 0.55) 0%, rgba(29, 39, 43, 0.25) 45%, rgba(29, 39, 43, 0.75) 100%); } .csi-404__inner { position: relative; flex: 1 1 0%; padding-top: max(clamp(80px, 12vh, 120px), calc(var(--csi-header-h) + 32px)); padding-bottom: clamp(28px, 5vh, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px 64px; align-items: end; } .csi-404__num { margin-top: 20px; font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(56px, min(10vw, 12vh), 150px); line-height: 0.82; letter-spacing: -0.07em; } .csi-404__title { margin-top: clamp(14px, 2.6vh, 28px); font-size: clamp(26px, min(4.4vw, 7vh), 60px); letter-spacing: -0.045em; line-height: 1.02; max-width: 14ch; color: var(--csi-white); } .csi-404__text { margin-top: clamp(14px, 2.4vh, 22px); font-size: clamp(16px, 1.6vw, 19px); color: rgba(255, 255, 255, 0.84); max-width: 50ch; } .csi-404__main .csi-buttons { margin-top: clamp(22px, 4vh, 36px); } .csi-404__record { justify-self: end; width: 100%; max-width: 520px; background: var(--csi-white); color: var(--csi-dark); padding: 28px; box-shadow: rgba(0, 0, 0, 0.6) 0 30px 70px -30px; } .csi-404__record-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .csi-404__record-label { font-family: var(--csi-font-display); font-size: 11.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--csi-text-3); } .csi-404__status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--csi-grey); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .csi-404__status span { width: 7px; height: 7px; border-radius: 50%; background: #B8452F; } .csi-404__record dl { margin: 22px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 24px; font-size: 15px; } .csi-404__record dt { color: var(--csi-text-3); } .csi-404__record dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } .csi-404__search { margin-top: 24px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(29, 39, 43, 0.18); padding: 4px 4px 4px 16px; color: var(--csi-text-3); } .csi-404__search svg { width: 18px; height: 18px; flex: none; } .csi-404__search input { flex: 1 1 0%; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--csi-font-body); font-size: 15px; color: var(--csi-dark); padding: 10px 0; } .csi-404__search button { flex: 0 0 auto; border: 0; background: var(--csi-dark); color: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; padding: 11px 18px; cursor: pointer; transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-404__search button:hover { background: var(--csi-green); border-radius: var(--csi-radius-hover); } .csi-404-dest { background: var(--csi-sand); padding: clamp(40px, 8vh, 112px) 0 128px; } .csi-404-dest__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; } .csi-404-dest__head h2 { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.04em; max-width: 18ch; } .csi-404-dest__head p { font-size: 17px; color: var(--csi-text-2); max-width: 42ch; } .csi-404-dest__grid { list-style: none; margin: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; padding: 8px; background: rgba(29, 39, 43, 0.06); } .csi-404-dest__card { height: 100%; min-height: 220px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--csi-white); color: var(--csi-dark); transition: background 0.25s, color 0.25s, border-radius var(--csi-t-radius); } .csi-404-dest__card:hover { background: var(--csi-dark); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-404-dest__top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.14em; } .csi-404-dest__top > span:first-child { opacity: 0.6; } .csi-404-dest__arrow { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--csi-green); color: var(--csi-white); } .csi-404-dest__arrow svg { width: 16px; height: 16px; } .csi-404-dest__body { display: flex; flex-direction: column; gap: 8px; } .csi-404-dest__title { font-family: var(--csi-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; } .csi-404-dest__text { font-size: 15px; opacity: 0.72; } @media (max-width: 720px) { .csi-404-dest { padding-bottom: 88px; } .csi-404__record { justify-self: stretch; } } .csi-search-results__docs-title { margin: 72px 0 24px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; } .csi-search-results__list:first-child + .csi-pager + .csi-search-results__docs-title, .csi-search-results__docs-title:first-child { margin-top: 0; } /* ================================================================ General page (S4o): page hero + general_content */ .csi-general__title { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 40px; max-width: 22ch; } .csi-details__body.csi-general__body { padding: 0; max-width: 1040px; gap: 32px 24px; } .csi-general__body .csi-prose { font-size: 17px; } @media (max-width: 720px) { .csi-details__body.csi-general__body { grid-template-columns: minmax(0, 1fr); } } .csi-team + .csi-team { margin-top: 56px; } .csi-team__title { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.025em; margin-bottom: 24px; } .csi-team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 24px 20px; } .csi-team__person { display: flex; flex-direction: column; gap: 4px; } .csi-team__photo { display: block; aspect-ratio: 1; background: var(--csi-grey); overflow: hidden; margin-bottom: 10px; } .csi-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .csi-team__name { font-family: var(--csi-font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--csi-dark); } .csi-team__role { font-size: 14px; line-height: 1.45; color: var(--csi-text-3); } .csi-team__links { display: flex; gap: 8px; margin-top: 8px; } .csi-team__links a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--csi-dark); color: var(--csi-white); transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-team__links a:hover { background: var(--csi-green); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-team__links svg { width: 16px; height: 16px; } .csi-general__body .csi-details__part:has(.csi-team) { max-width: none; } .csi-details__body.csi-general__body:has(.csi-team) { max-width: none; } /* general pages: a single image (screenshot, certificate, logo) never spans the whole column – click enlarges it */ .csi-general__body .csi-gallery--1 { max-width: 560px; } .csi-general__body .csi-gallery--1 .csi-gallery__img { max-height: 460px; width: auto; max-width: 100%; margin-inline: auto; } .csi-section--bg-white .csi-contact-main__card { border: 1px solid var(--csi-line); } /* search result tabs (Emil 09.10.): Pages / News / Events / Documents, each with its own pagination */ .csi-search-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .csi-search-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(29, 39, 43, 0.28); color: var(--csi-dark); font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; transition: border-radius var(--csi-t-radius), border-color var(--csi-t-fast); } .csi-search-tab span { opacity: 0.6; font-size: 12px; } a.csi-search-tab:hover { border-color: var(--csi-dark); border-radius: var(--csi-radius-hover); color: var(--csi-dark); } .csi-search-tab.is-active { background: var(--csi-dark); border-color: var(--csi-dark); color: var(--csi-white); } a.csi-search-tab.is-active:hover { color: var(--csi-white); } .csi-search-tab.is-empty { opacity: 0.45; } /* Cloudflare Turnstile is a fixed 300 px widget (09.10. mobile check): form cards go edge to edge on phones so it fits from 342 px on; below that it is scaled down instead of widening the page. */ @media (max-width: 600px) { .csi-contact-main__card { margin-inline: calc(var(--csi-gutter) * -1); padding: 28px var(--csi-gutter); border-left: 0; border-right: 0; } .csi-section--bg-white .csi-contact-main__card { border-left: 0; border-right: 0; } .csi-comments__form { margin-inline: calc(var(--csi-gutter) * -1); padding: 24px var(--csi-gutter); } } @media (max-width: 341px) { .cf-turnstile { transform: scale(0.84); transform-origin: 0 0; height: 56px; } } /* long single words in hero titles (e.g. "Feuchtigkeitsanalysator") never widen the page on phones */ .csi-page-hero__title, .csi-split-hero__title, .csi-news-hero__title, .csi-standard-hero__title { overflow-wrap: break-word; } html[lang^="de"] :is(.csi-page-hero__title, .csi-split-hero__title, .csi-news-hero__title, .csi-standard-hero__title) { hyphens: auto; -webkit-hyphens: auto; } .csi-pdetail__points li, .csi-pdetail__text { overflow-wrap: anywhere; } html[lang^="de"] :is(.csi-pdetail__points, .csi-pdetail__text) { hyphens: auto; -webkit-hyphens: auto; } .csi-path__top { flex-wrap: wrap; } /* long code ("Construction") + badge on narrow phones */ .csi-path__code { min-width: 0; overflow-wrap: anywhere; } .csi-path__button.csi-button { white-space: normal; max-width: 100%; } .csi-event-row__meta > span, .csi-event-row__title { min-width: 0; overflow-wrap: anywhere; } html[lang^="de"] .csi-event-row__meta { hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 420px) { .csi-button, .csi-event-row__actions .csi-button { white-space: normal; max-width: 100%; } .csi-news-card__title { overflow-wrap: anywhere; } } /* long German labels on narrow phones */ html[lang^="de"] .csi-news-card__title { hyphens: auto; -webkit-hyphens: auto; } .csi-product-hero__crumbs { margin-bottom: 22px; } /* a general-content section that continues a section with the same background (tool pages: numbered text → screenshots) gets no extra top spacing – one section gap, as elsewhere (S4v) */ .csi-section--bg-grey + .csi-general.csi-section--bg-grey, .csi-section--bg-white + .csi-general.csi-section--bg-white, .csi-section--bg-sand + .csi-general.csi-section--bg-sand { padding-top: 0; } /* ===================================================== S4x (12.10.2026): Newsletter page – design "Carbon Standards Newsletter" */ .csi-page-hero--lead .csi-page-hero__line:first-child { font-size: 0.86em; color: var(--csi-green-light); } .csi-page-hero__badge { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--csi-white); background: var(--csi-green); padding: 5px 10px; } /* sign-up: "What you receive" left, form card right */ .csi-nl-signup.csi-section--space-default { padding-block: 144px 152px; } .csi-nl-signup__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px 88px; align-items: start; } .csi-nl-signup__title { margin-top: 18px; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.03em; color: var(--csi-dark); max-width: 22ch; } .csi-nl-signup__intro { margin-top: 24px; font-size: 17px; line-height: 1.65; color: var(--csi-text-2); max-width: 56ch; } .csi-nl-signup__list-title { margin-top: 36px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--csi-dark); } .csi-nl-signup__topics { list-style: none; margin: 20px 0 0; padding: 0; border-bottom: 1px solid var(--csi-line); } .csi-nl-signup__topics li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 18px 0; border-top: 1px solid var(--csi-line); } .csi-nl-signup__num { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-green); padding-top: 3px; font-variant-numeric: tabular-nums; } .csi-nl-signup__topics p { font-size: 15.5px; line-height: 1.55; color: var(--csi-text-2); } .csi-nl-signup__topics strong { font-family: var(--csi-font-display); font-weight: 600; color: var(--csi-dark); } .csi-nl-signup__privacy { margin-top: 22px; font-size: 14px; font-style: italic; color: var(--csi-text-3); } .csi-nl-signup__privacy a { color: var(--csi-dark); text-decoration: underline; text-underline-offset: 3px; } .csi-nl-signup__card { background: var(--csi-white); padding: 40px; box-shadow: 0 24px 60px -24px rgba(29, 39, 43, 0.25); } .csi-nl-signup__card-title { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; color: var(--csi-dark); } .csi-nl-signup__card-text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--csi-text-3); } .csi-nl-signup__list { margin-top: 26px; } .csi-nl-signup__list-label, .csi-newsletter-signup .ff-el-input--label label { font-family: var(--csi-font-display); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-dark); } .csi-nl-signup__req { color: var(--csi-green); } .csi-nl-signup__list-box { margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--csi-sand); border: 1px solid var(--csi-line-soft); font-size: 15px; color: var(--csi-dark); } .csi-nl-signup__check { flex: 0 0 auto; width: 18px; height: 18px; background: var(--csi-green); color: var(--csi-white); display: inline-flex; align-items: center; justify-content: center; } .csi-nl-signup__check svg { width: 12px; height: 12px; } .csi-nl-signup__list-name { flex: 1 1 auto; font-weight: 500; } .csi-nl-signup__list-lang { font-size: 12px; letter-spacing: 0.14em; color: var(--csi-text-3); } .csi-nl-signup__form { margin-top: 22px; } .csi-nl-signup__note { margin-top: 18px; font-size: 13px; color: var(--csi-text-3); } /* form in the card: title toggles | first + family name | company + e-mail | consent | Turnstile | Register → */ .csi-newsletter-signup .fluentform .ff-el-group { margin-bottom: 20px; } .csi-newsletter-signup .fluentform .ff-el-input--label { margin-bottom: 8px; } .csi-newsletter-signup .fluentform .ff-el-form-control { background: var(--csi-sand); border-color: var(--csi-line-soft); } .csi-newsletter-signup .fluentform .ff-el-form-control:focus { background: var(--csi-white); } .csi-newsletter-signup .fluentform .ff-el-form-control::placeholder { color: rgba(29, 39, 43, 0.42); } .csi-newsletter-signup .ff_list_inline .ff-el-input--content { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .csi-newsletter-signup .fluentform .ff-el-group.ff_list_inline .ff-el-form-check { display: block; margin: 0; width: 100%; } .csi-newsletter-signup .ff_list_inline .ff-el-form-check-label { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 16px; border: 1px solid rgba(29, 39, 43, 0.2); background: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; color: var(--csi-dark); cursor: pointer; transition: background var(--csi-t-fast), color var(--csi-t-fast), border-color var(--csi-t-fast); } .csi-newsletter-signup .fluentform .ff_list_inline .ff-el-form-check-input.ff-el-form-check-radio { position: absolute !important; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .csi-newsletter-signup .ff_list_inline .ff-el-form-check-label:hover { border-color: var(--csi-dark); } .csi-newsletter-signup .ff_list_inline .ff-el-form-check-label:has(input:checked) { background: var(--csi-dark); border-color: var(--csi-dark); color: var(--csi-white); } .csi-newsletter-signup .ff_list_inline .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--csi-green); outline-offset: 2px; } .csi-newsletter-signup .fluentform .ff-el-tc label { font-size: 14.5px; } .csi-newsletter-signup .fluentform .ff-el-tc a { color: var(--csi-dark); text-decoration: underline; text-underline-offset: 3px; } .csi-newsletter-signup .fluentform .ff_submit_btn_wrapper { margin-top: 4px; } .csi-newsletter-signup .fluentform .ff-btn-submit { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 22px; font-weight: 500; letter-spacing: 0; text-align: left; } .csi-newsletter-signup .fluentform .ff-btn-submit::after { content: "→"; font-size: 18px; line-height: 1; } @media (min-width: 900px) { .csi-newsletter-signup .fluentform fieldset { column-gap: 12px; } .csi-newsletter-signup .fluentform fieldset > .ff-name-field-wrapper .ff-t-container { gap: 12px; } .csi-newsletter-signup .fluentform fieldset > .ff-el-group:has([name="company"]) { grid-column: 1; grid-row: 3; } .csi-newsletter-signup .fluentform fieldset > .ff-el-group:has([name="email"]) { grid-column: 2; grid-row: 3; } } @media (max-width: 720px) { .csi-nl-signup.csi-section--space-default { padding-block: 88px 96px; } .csi-nl-signup__card { margin-inline: calc(var(--csi-gutter) * -1); padding: 32px var(--csi-gutter); } } /* archive: dark card left (sticky), list right; "Search editions" */ .csi-nl-archive.csi-section--space-default { padding-block: 144px; } .csi-nl-archive__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; } .csi-nl-archive__title { margin-top: 14px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.05em; color: var(--csi-dark); } .csi-nl-archive__search { flex: 0 1 340px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--csi-white); border: 1px solid var(--csi-line-soft); color: var(--csi-text-3); } .csi-nl-archive__search svg { flex: 0 0 auto; width: 16px; height: 16px; } .csi-nl-archive__search input { flex: 1 1 auto; min-width: 0; padding: 13px 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--csi-dark); outline: 0; } .csi-nl-archive__search:focus-within { border-color: var(--csi-green); } .csi-nl-archive__grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px; align-items: start; } .csi-nl-archive__card { position: sticky; top: calc(var(--csi-header-h) + 24px); background: var(--csi-dark); color: var(--csi-white); padding: 32px; } .csi-nl-archive__card-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #7FD79C; } .csi-nl-archive__card-title { margin-top: 16px; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.03em; color: var(--csi-white); max-width: 14ch; } .csi-nl-archive__card-text { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); } .csi-nl-archive__card .csi-button { margin-top: 24px; } .csi-nl-archive__panel { background: var(--csi-white); padding: 32px 32px 24px; } .csi-nl-archive__tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--csi-line); } .csi-nl-archive__tab { padding-bottom: 10px; margin-bottom: -1px; border-bottom: 2px solid var(--csi-green); font-family: var(--csi-font-display); font-weight: 600; font-size: 18px; color: var(--csi-dark); } .csi-nl-archive__tab small { font-size: 11px; font-weight: 500; color: var(--csi-green); vertical-align: super; } .csi-nl-archive__count { margin-top: 18px; font-family: var(--csi-font-display); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-text-3); } .csi-nl-archive__list { list-style: none; margin: 12px 0 0; padding: 0; } .csi-nl-archive__item { border-top: 1px solid var(--csi-line); } .csi-nl-archive__item[hidden] { display: none; } .csi-nl-archive__row { display: grid; grid-template-columns: 108px minmax(0, 1fr) 20px; gap: 16px; align-items: baseline; padding: 18px 0; color: var(--csi-dark); } .csi-nl-archive__row time { font-size: 14px; color: var(--csi-text-3); font-variant-numeric: tabular-nums; } .csi-nl-archive__subject { font-family: var(--csi-font-display); font-weight: 500; font-size: 16.5px; line-height: 1.4; overflow-wrap: anywhere; transition: color var(--csi-t-fast); } .csi-nl-archive__arrow { color: var(--csi-green); } .csi-nl-archive__arrow svg { width: 16px; height: 16px; transition: transform var(--csi-t-fast); } .csi-nl-archive__row:hover .csi-nl-archive__subject, .csi-nl-archive__row:focus-visible .csi-nl-archive__subject { color: var(--csi-green); } .csi-nl-archive__row:hover .csi-nl-archive__arrow svg { transform: translate(2px, -2px); } .csi-nl-archive__none { padding: 24px 0 8px; color: var(--csi-text-3); } @media (max-width: 1024px) { .csi-nl-archive__grid { grid-template-columns: minmax(0, 1fr); } .csi-nl-archive__card { position: static; } } @media (max-width: 720px) { .csi-nl-archive.csi-section--space-default { padding-block: 88px; } .csi-nl-archive__search { flex-basis: 100%; } .csi-nl-archive__panel { margin-inline: calc(var(--csi-gutter) * -1); padding: 24px var(--csi-gutter) 16px; } .csi-nl-archive__row { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; } .csi-nl-archive__row time { grid-column: 1 / -1; } } /* green closing band (cta_photo "band") */ .csi-cta-photo--band { background: var(--csi-green); padding-block: 72px; } .csi-cta-photo--band .csi-cta-photo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; } .csi-cta-photo--band .csi-cta-photo__title { margin-top: 0; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; max-width: 20ch; } .csi-cta-photo--band .csi-button--ghost { color: var(--csi-white); border-color: rgba(255, 255, 255, 0.6); } .csi-cta-photo--band .csi-button--ghost:hover, .csi-cta-photo--band .csi-button--ghost:focus-visible { background: var(--csi-white); color: var(--csi-dark); border-color: var(--csi-white); } .csi-cta-photo--band .csi-button--light:hover, .csi-cta-photo--band .csi-button--light:focus-visible { background: var(--csi-dark); color: var(--csi-white); } html[lang] .csi-cta-photo--band .csi-cta-photo__title { hyphens: manual; -webkit-hyphens: manual; } /* no "CAR-BON" in the DE band */ @media (max-width: 720px) { .csi-cta-photo--band { padding-block: 56px; } } /* ===================================================== S4x (12.10.2026): device pages – design "Carbon Standards Product" */ .csi-ppage.csi-section--space-default { padding-block: 88px 104px; } .csi-ppage__back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--csi-font-display); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--csi-dark); } .csi-ppage__back svg { width: 14px; height: 14px; transition: transform var(--csi-t-fast); } .csi-ppage__back:hover { color: var(--csi-green); } .csi-ppage__back:hover svg { transform: translateX(-3px); } .csi-ppage__grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 56px; align-items: start; } .csi-pgallery__main { position: relative; aspect-ratio: 4 / 3; background: var(--csi-white); border: 1px solid rgba(29, 39, 43, 0.1); overflow: hidden; } .csi-pgallery__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 32px 32px 76px; opacity: 0; transition: opacity 0.3s; } .csi-pgallery__img.is-active { opacity: 1; } .csi-pgallery__main .csi-pslider__count { background: var(--csi-grey); } .csi-pgallery__main .csi-pslider__btn { width: 44px; height: 44px; } .csi-pgallery__thumbs { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; } .csi-pgallery__thumb { aspect-ratio: 1 / 1; padding: 6px; background: var(--csi-white); border: 2px solid rgba(29, 39, 43, 0.1); cursor: pointer; transition: border-color var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .csi-pgallery__thumb:hover { border-color: rgba(29, 39, 43, 0.35); } .csi-pgallery__thumb.is-active { border-color: var(--csi-green); } .csi-ppage__body { display: flex; flex-direction: column; gap: 28px; } .csi-ppage__pos { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-text-3); font-variant-numeric: tabular-nums; } .csi-ppage__title { margin-top: 12px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; color: var(--csi-dark); } .csi-ppage__intro { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--csi-text-2); } .csi-ppage__specs-title { font-family: var(--csi-font-display); font-weight: 500; font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--csi-dark); } .csi-ppage__specs dl { margin: 12px 0 0; border-top: 1px solid rgba(29, 39, 43, 0.14); } .csi-ppage__specs dl > div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(29, 39, 43, 0.1); font-size: 15.5px; } .csi-ppage__specs dt { color: var(--csi-text-3); } .csi-ppage__specs dd { margin: 0; color: var(--csi-dark); font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .csi-ppage__note { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(29, 39, 43, 0.1); } .csi-ppage__note-icon { flex: 0 0 auto; width: 44px; height: 44px; background: var(--csi-green); color: var(--csi-white); display: flex; align-items: center; justify-content: center; } .csi-ppage__note-icon svg { width: 20px; height: 20px; } .csi-ppage__note p { font-size: 14.5px; line-height: 1.5; color: var(--csi-text-2); } .csi-ptext.csi-section--space-default { padding-block: 104px 120px; } .csi-ptext__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: start; } .csi-ptext--single .csi-ptext__inner { grid-template-columns: minmax(0, 1fr); } .csi-ptext__title, .csi-pothers__title { font-size: clamp(28px, 3.2vw, 46px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--csi-dark); } .csi-ptext__text { margin-top: 28px; max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--csi-text-2); } .csi-ptext__text h3 { margin-top: 24px; font-size: 19px; } .csi-ptext__card { background: var(--csi-white); padding: 40px 40px 32px; } .csi-ptext__card-title { font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csi-dark); } .csi-ptext__points { list-style: none; margin: 20px 0 0; padding: 0; } .csi-ptext__points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgba(29, 39, 43, 0.1); font-size: 15.5px; line-height: 1.5; color: var(--csi-dark); overflow-wrap: anywhere; } .csi-ptext__points li > span:first-child { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-green); padding-top: 2px; font-variant-numeric: tabular-nums; } html[lang^="de"] :is(.csi-ptext__text, .csi-ptext__points, .csi-ppage__specs, .csi-ppage__title, .csi-pothers__name) { hyphens: auto; -webkit-hyphens: auto; } .csi-pothers.csi-section--space-default { padding-block: 104px 128px; } .csi-pothers__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; } .csi-pothers__all { font-family: var(--csi-font-display); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--csi-dark); } .csi-pothers__all:hover { color: var(--csi-green); } .csi-pothers__grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; } .csi-pothers__card { height: 100%; display: grid; grid-template-columns: minmax(120px, 40%) 1fr; background: var(--csi-grey); color: var(--csi-dark); transition: box-shadow 0.25s, transform 0.25s; } .csi-pothers__card:hover { color: var(--csi-dark); transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(29, 39, 43, 0.35); } .csi-pothers__media { position: relative; background: var(--csi-white); border: 1px solid rgba(29, 39, 43, 0.08); min-height: 200px; } .csi-pothers__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; } .csi-pothers__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .csi-pothers__num { font-family: var(--csi-font-display); font-size: 12px; letter-spacing: 0.14em; color: var(--csi-text-3); } .csi-pothers__name { font-family: var(--csi-font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; } .csi-pothers__text { font-size: 15px; line-height: 1.5; color: var(--csi-text-2); } .csi-pothers__more { margin-top: auto; padding-top: 8px; font-family: var(--csi-font-display); font-weight: 500; font-size: 14.5px; color: var(--csi-green); } @media (max-width: 720px) { .csi-ppage.csi-section--space-default { padding-block: 48px 72px; } .csi-ppage__grid { gap: 40px; } .csi-pgallery__img { padding: 20px 20px 68px; } .csi-ptext.csi-section--space-default, .csi-pothers.csi-section--space-default { padding-block: 72px 88px; } .csi-ptext__card { margin-inline: calc(var(--csi-gutter) * -1); padding: 28px var(--csi-gutter); } .csi-pothers__card { grid-template-columns: minmax(96px, 34%) 1fr; } .csi-pothers__media { min-height: 160px; } .csi-pothers__body { padding: 20px; } } /* ===================================================== S4y (12.10.2026): standard selector – finder with Back, rules, second option */ .csi-finder__back { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; font-family: var(--csi-font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-text-2); cursor: pointer; } .csi-finder__back svg { width: 16px; height: 16px; transition: transform var(--csi-t-fast); } .csi-finder__back:hover, .csi-finder__back:focus-visible { color: var(--csi-green); } .csi-finder__back:hover svg { transform: translateX(-3px); } .csi-finder__next { font-size: 15.5px; line-height: 1.55; color: var(--csi-text-2); max-width: 56ch; padding: 14px 16px; background: var(--csi-sand); border-left: 3px solid var(--csi-green); } .csi-finder__next strong { font-family: var(--csi-font-display); font-weight: 600; color: var(--csi-dark); } .csi-finder__second { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 15px; } .csi-finder__second-label { font-size: 12px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; color: var(--csi-text-3); } .csi-finder__second-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--csi-font-display); font-weight: 500; color: var(--csi-green); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .csi-finder__second-link:hover { color: var(--csi-dark); } .csi-finder__second-arrow svg { width: 14px; height: 14px; } .csi-finder__result-title { overflow-wrap: anywhere; } html[lang^="de"] :is(.csi-finder__result-title, .csi-finder__q, .csi-finder__answer) { hyphens: auto; -webkit-hyphens: auto; } /* ===================================================== S4z (12.10.2026): events list filled by hand – featured card inside the events section */ .csi-events .csi-event-next { background: transparent; padding: 0 0 64px; } .csi-events .csi-event-next:last-child { padding-bottom: 0; } .csi-event-next__card--noimage { grid-template-columns: minmax(0, 1fr); } /* price lists as an accordion (doc_rows "accordion") */ .csi-docrows__accordion { margin-top: 40px; } .csi-docrows__accordion .csi-details__item { background: var(--csi-white); } /* ===================================================== S4za (12.10.2026): About us pages – Company, Team, Partner, Jobs */ .csi-page-hero--green .csi-page-hero__line { color: var(--csi-green-light); } .csi-about-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .csi-about-tabs__tab { display: inline-flex; align-items: center; padding: 13px 22px; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(29, 39, 43, 0.55); color: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 16px; transition: background var(--csi-t-fast), border-color var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-about-tabs__tab:hover, .csi-about-tabs__tab:focus-visible { color: var(--csi-white); border-color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-about-tabs__tab.is-active { background: var(--csi-green); border-color: var(--csi-green); } /* section index (numbered cells below the hero) */ .csi-sindex { background: var(--csi-sand); border-bottom: 1px solid var(--csi-line); } .csi-sindex__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .csi-sindex__cell { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; border-right: 1px solid var(--csi-line); color: var(--csi-dark); transition: background var(--csi-t-fast); } .csi-sindex li:last-child .csi-sindex__cell { border-right: 0; } .csi-sindex__cell:hover, .csi-sindex__cell:focus-visible { background: rgba(255, 255, 255, 0.6); color: var(--csi-dark); } .csi-sindex__num { display: flex; justify-content: space-between; gap: 12px; font-family: var(--csi-font-display); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--csi-green); } .csi-sindex__count { font-family: var(--csi-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; color: var(--csi-text-3); } .csi-sindex__label { font-family: var(--csi-font-display); font-weight: 500; font-size: 17px; line-height: 1.3; } @media (max-width: 720px) { .csi-sindex__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csi-sindex__cell { padding: 18px 16px; border-bottom: 1px solid var(--csi-line); } .csi-sindex__label { font-size: 15px; } } /* shared split head: kicker + title left, intro right */ .csi-split-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; } .csi-split-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .csi-split-head__title { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; max-width: 16ch; } .csi-on-dark .csi-split-head__title { color: var(--csi-white); } .csi-split-head__intro { flex: 0 1 460px; font-size: 17px; line-height: 1.65; color: var(--csi-text-2); } .csi-on-dark .csi-split-head__intro { color: rgba(255, 255, 255, 0.8); } /* vision */ .csi-vision__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 88px; align-items: start; } .csi-vision__inner > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .csi-vision__title { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -0.045em; line-height: 1.02; text-transform: uppercase; color: var(--csi-dark); max-width: 18ch; } .csi-vision__lead { font-family: var(--csi-font-display); font-weight: 300; font-size: clamp(22px, 2.3vw, 33px); line-height: 1.4; color: var(--csi-dark); letter-spacing: -0.01em; } .csi-vision__text { margin-top: 28px; font-size: 17px; line-height: 1.7; color: var(--csi-text-2); max-width: 56ch; } .csi-vision__note { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--csi-line); display: flex; align-items: center; gap: 16px; font-size: 14.5px; line-height: 1.6; color: var(--csi-text-2); } .csi-vision__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var(--csi-green); display: flex; align-items: center; justify-content: center; } /* accreditations */ .csi-accred__grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; } .csi-accred__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--csi-sand); color: var(--csi-dark); } .csi-accred__review { margin: -10px -10px 4px; padding: 6px 10px; background: #FFF3C4; font-size: 12px; font-weight: 600; color: #6B5300; } .csi-accred__logo { display: flex; align-items: center; justify-content: center; height: 112px; padding: 16px; background: var(--csi-white); } .csi-accred__logo img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; } .csi-accred__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .csi-accred__name { font-size: 28px; letter-spacing: -0.03em; } .csi-accred__status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .csi-accred__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .csi-accred__status--solid { background: var(--csi-green); color: var(--csi-white); } .csi-accred__status--outline { border: 1px solid rgba(29, 39, 43, 0.25); background: var(--csi-white); color: var(--csi-dark); } .csi-accred__status--outline::before { background: transparent; border: 1px solid currentColor; } .csi-accred__full { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; line-height: 1.55; text-transform: uppercase; color: var(--csi-green); } .csi-accred__text { font-size: 15px; line-height: 1.6; color: var(--csi-text-2); overflow-wrap: anywhere; } .csi-accred__link { margin-top: auto; align-self: flex-start; } /* governance */ .csi-gov__title { margin-top: 22px; } .csi-gov__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; align-items: stretch; } .csi-gov__card { background: var(--csi-white); padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 22px; min-width: 0; } .csi-gov__card-title { font-size: 26px; letter-spacing: -0.03em; text-transform: uppercase; } .csi-gov__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .csi-gov__text { font-size: 16px; line-height: 1.65; color: var(--csi-text-2); } .csi-gov__row .csi-gov__text { flex: 1 1 220px; } .csi-gov__logo { flex: 0 0 180px; display: flex; align-items: center; justify-content: center; padding: 14px; background: var(--csi-grey); } .csi-gov__logo img { max-height: 44px; width: auto; height: auto; object-fit: contain; } .csi-gov__docs { margin-top: auto; } .csi-gov__members { list-style: none; margin: 0; padding: 0; } .csi-gov__members li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 0; border-top: 1px solid var(--csi-line); } .csi-gov__name { font-family: var(--csi-font-display); font-weight: 500; font-size: 18px; color: var(--csi-dark); } .csi-gov__role { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-text-3); } .csi-gov__role.is-head { color: var(--csi-green); } .csi-gov__mail { grid-column: 1 / -1; justify-self: start; font-size: 15px; color: var(--csi-text-2); border-bottom: 1px solid var(--csi-green); overflow-wrap: anywhere; } .csi-gov__mail:hover { color: var(--csi-green); } /* annual reports */ .csi-reports__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; } .csi-reports__latest { display: flex; flex-direction: column; min-height: 400px; padding: 32px; background: var(--csi-green); color: var(--csi-white); } .csi-reports__latest-top { display: flex; justify-content: space-between; align-items: flex-start; } .csi-reports__latest-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .csi-reports__latest-year { margin-top: auto; font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(80px, 10vw, 140px); letter-spacing: -0.06em; line-height: 0.9; } .csi-reports__latest-bottom { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .csi-reports__latest-name { font-family: var(--csi-font-display); font-weight: 500; font-size: 22px; } .csi-reports__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--csi-line); } .csi-reports__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 4px; border-bottom: 1px solid var(--csi-line); } .csi-reports__year { font-family: var(--csi-font-display); font-weight: 300; font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -0.03em; line-height: 1; color: var(--csi-dark); } .csi-reports__name { font-size: 15px; color: var(--csi-text-2); } .csi-reports__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--csi-dark); color: var(--csi-white); transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-reports__icon:hover, .csi-reports__icon:focus-visible { background: var(--csi-green); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-reports__icon svg { width: 18px; height: 18px; } /* logo download + jobs teaser */ .csi-brandjobs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; align-items: stretch; } .csi-brandjobs__logo { background: var(--csi-white); padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 18px; min-width: 0; } .csi-brandjobs__title { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.045em; text-transform: uppercase; } .csi-brandjobs__preview { display: flex; align-items: center; justify-content: center; height: 200px; padding: 24px; background: var(--csi-grey); } .csi-brandjobs__preview img { max-height: 100%; max-width: 70%; width: auto; height: auto; object-fit: contain; } .csi-brandjobs__label { font-size: 14px; color: var(--csi-text-3); } .csi-brandjobs__formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: -6px; } .csi-brandjobs__format { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; background: var(--csi-dark); color: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 14px; transition: background var(--csi-t-fast), border-radius var(--csi-t-radius); } .csi-brandjobs__format:hover, .csi-brandjobs__format:focus-visible { background: var(--csi-green); color: var(--csi-white); border-radius: var(--csi-radius-hover); } .csi-brandjobs__format svg { width: 16px; height: 16px; } .csi-brandjobs__note { font-size: 15px; color: var(--csi-text-2); } .csi-brandjobs__note a { color: var(--csi-dark); text-decoration: underline; text-underline-offset: 3px; } .csi-brandjobs__jobs { position: relative; overflow: hidden; min-height: 460px; background: var(--csi-dark); color: var(--csi-white); } .csi-brandjobs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .csi-brandjobs__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 39, 43, 0.55) 0%, rgba(29, 39, 43, 0.25) 45%, rgba(29, 39, 43, 0.85) 100%); } .csi-brandjobs__jobs-body { position: relative; height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(24px, 3.4vw, 48px); } .csi-brandjobs__jobs-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--csi-green-light); } .csi-brandjobs__jobs-title { margin-top: 16px; font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.045em; text-transform: uppercase; color: var(--csi-white); } .csi-brandjobs__jobs-text { margin-bottom: 20px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); max-width: 44ch; } .csi-brandjobs__jobs .csi-button--ghost { color: var(--csi-white); border-color: rgba(255, 255, 255, 0.6); } /* team */ .csi-section.csi-team { padding-block: var(--csi-section-y-compact); } /* each group: same space above the pre-title and below the cards */ .csi-section.csi-team + .csi-section.csi-team { margin-top: 0; } .csi-team__title { margin-top: 22px; font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; color: var(--csi-dark); } .csi-team__grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; } .csi-person { display: flex; flex-direction: column; background: var(--csi-grey); min-width: 0; } .csi-section--bg-grey .csi-person { background: var(--csi-white); } .csi-person__media { position: relative; aspect-ratio: 1 / 1; background: #232C31; overflow: hidden; } .csi-person__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .csi-person__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(40px, 4.6vw, 64px); letter-spacing: -0.04em; color: var(--csi-white); } .csi-person__badge { position: absolute; right: 16px; bottom: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--csi-green); display: flex; align-items: center; justify-content: center; } .csi-person__media .csi-person__badge img { position: static; inset: auto; width: 12px; height: 18px; object-fit: contain; } /* not the photo rule above: the whole white S in the green circle (Tanja, pin #46) */ .csi-person__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 22px 24px 24px; } .csi-person__name { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; color: var(--csi-dark); } .csi-person__role { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.55; text-transform: uppercase; color: var(--csi-green); } .csi-person__contact { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--csi-line); display: flex; flex-direction: column; gap: 10px; } .csi-person__contact li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; } .csi-person__contact svg { width: 15px; height: 15px; margin-top: 3px; color: var(--csi-text-2); } .csi-person__contact a { color: var(--csi-text-2); overflow-wrap: anywhere; } .csi-person__mail { border-bottom: 1px solid var(--csi-green); } .csi-person__contact a:hover { color: var(--csi-green); } /* partners */ .csi-pprincipal__grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; } .csi-pprincipal__card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.8vw, 40px); background: var(--csi-sand); min-width: 0; } .csi-pprincipal__logo { display: flex; align-items: center; justify-content: center; height: 180px; padding: 24px; background: var(--csi-white); margin-bottom: 14px; } .csi-pprincipal__logo img { max-height: 100px; max-width: 80%; width: auto; height: auto; object-fit: contain; } .csi-pprincipal__name { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.035em; line-height: 1.05; text-transform: uppercase; } .csi-pprincipal__text { font-size: 16px; line-height: 1.7; color: var(--csi-text-2); } .csi-pprincipal__link { margin-top: auto; align-self: flex-start; } .csi-pgrid__grid { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; } .csi-pgrid__card { height: 100%; display: flex; flex-direction: column; background: var(--csi-white); color: var(--csi-dark); transition: transform var(--csi-t-fast); } a.csi-pgrid__card:hover { color: var(--csi-dark); transform: translateY(-3px); } .csi-pgrid__logo { display: flex; align-items: center; justify-content: center; height: 150px; padding: 22px; } .csi-pgrid__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .csi-pgrid__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--csi-line); font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; } .csi-pgrid__name { min-width: 0; overflow-wrap: anywhere; } .csi-pgrid__arrow { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--csi-grey); } .csi-pgrid__arrow svg { width: 13px; height: 13px; } a.csi-pgrid__card:hover .csi-pgrid__arrow { background: var(--csi-green); color: var(--csi-white); } /* jobs */ .csi-jobs__table { margin-top: 56px; border-top: 1px solid var(--csi-dark); } .csi-jobs__head, .csi-jobs__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--csi-line); } .csi-jobs__head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--csi-text-3); } .csi-jobs__row { font-size: 16px; color: var(--csi-text-2); } .csi-jobs__title { font-family: var(--csi-font-display); font-weight: 500; color: var(--csi-dark); } .csi-jobs__title a { color: var(--csi-dark); } .csi-jobs__title a:hover { color: var(--csi-green); } .csi-jobs__title svg { width: 14px; height: 14px; vertical-align: -1px; } .csi-jobs__empty { display: flex; align-items: center; gap: 32px; padding: 48px 4px; border-bottom: 1px solid var(--csi-line); } .csi-jobs__zero { font-family: var(--csi-font-display); font-weight: 300; font-size: clamp(80px, 8vw, 110px); line-height: 0.9; color: var(--csi-green); } .csi-jobs__empty-title { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.035em; text-transform: uppercase; color: var(--csi-dark); } .csi-jobs__empty p { margin-top: 8px; font-size: 16.5px; color: var(--csi-text-2); } .csi-jobs__buttons { margin-top: 56px; } @media (max-width: 720px) { .csi-jobs__head { display: none; } .csi-jobs__row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .csi-jobs__empty { gap: 20px; padding: 32px 0; } .csi-reports__latest { min-height: 300px; padding: 24px; } .csi-reports__row { gap: 14px; } .csi-person__body { padding: 18px; } .csi-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .csi-person__name { font-size: 17px; } .csi-person__contact li { font-size: 13px; } .csi-person__badge { width: 26px; height: 26px; right: 10px; bottom: 10px; } .csi-brandjobs__jobs { min-height: 420px; } .csi-pgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csi-pgrid__logo { height: 110px; padding: 14px; } } @media (max-width: 400px) { .csi-team__grid { grid-template-columns: minmax(0, 1fr); } } html[lang^="de"] :is(.csi-split-head__title, .csi-vision__title, .csi-team__title, .csi-accred__full, .csi-pprincipal__name, .csi-brandjobs__jobs-title, .csi-jobs__empty-title, .csi-sindex__label) { hyphens: auto; -webkit-hyphens: auto; } .csi-jobs__buttons .csi-button--ghost { flex-direction: row-reverse; } /* "← Back to company" */ /* ===================================================== R1 review round 1 (13.10.2026) */ .csi-duo__text strong { color: var(--csi-green); font-weight: 600; } /* highlighted words (Standards overview) */ .csi-footer { border-top: 1px solid var(--csi-line); } /* a sand/grey last section stays separate from the grey footer */ /* ---------------------------------------------------------------- Credits pages (S4zi, 14.10.2026) Designs "Buyers and Traders" and "Verification Partners": accordion with cards, photo band, process line, text + cards, document cards, hero strip, CTA with the button below the text. */ .csi-split-head--case .csi-split-head__title { text-transform: none; max-width: 21ch; } .csi-page-hero__intro strong { color: var(--csi-green-light); font-weight: 600; } .csi-page-hero__strip { position: relative; background: var(--csi-dark); border-top: 1px solid var(--csi-line-inverse); } .csi-page-hero__strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; min-height: 58px; padding-block: 12px; } .csi-page-hero__strip-label { font-size: var(--csi-text-xs); font-weight: 600; letter-spacing: var(--csi-tracking-caps-wide); text-transform: uppercase; color: var(--csi-green-light); } .csi-page-hero__strip a { font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; color: var(--csi-white); text-decoration: none; } .csi-page-hero__strip a:hover, .csi-page-hero__strip a:focus-visible { color: var(--csi-green-light); } /* accordion with cards */ .csi-acards__list { margin-top: 64px; border-top: 1px solid var(--csi-line); } .csi-on-dark .csi-acards__list { border-top-color: var(--csi-line-inverse); } /* S7a (16.10.2026, Barbara): without a section heading (pin #184) the list starts at the normal section padding - the 64/40 px gap is only for spacing below the heading */ .csi-acards .csi-container > .csi-acards__list:first-child { margin-top: 0; } .csi-acards__item { border-bottom: 1px solid var(--csi-line); } .csi-on-dark .csi-acards__item { border-bottom-color: var(--csi-line-inverse); background: rgba(255, 255, 255, 0.03); } .csi-acards__trigger { display: flex; align-items: center; gap: 24px; width: 100%; padding: 36px 0; background: none; border: 0; text-align: left; color: inherit; cursor: pointer; font: inherit; } .csi-on-dark .csi-acards__trigger { padding-inline: 32px; } .csi-acards__head { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .csi-acards__title { font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; } .csi-acards__sub { font-size: 16px; line-height: 1.5; color: var(--csi-text-2); } .csi-on-dark .csi-acards__sub { color: var(--csi-on-dark-2); font-size: 14px; } .csi-acards__num { flex: 0 0 72px; font-family: var(--csi-font-display); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); color: var(--csi-green); letter-spacing: -0.03em; } .csi-acards__toggle { position: relative; margin-left: auto; flex: 0 0 52px; height: 52px; border: 1px solid var(--csi-line); background: var(--csi-white); transition: background var(--csi-t-fast), border-color var(--csi-t-fast); } .csi-acards__toggle::before, .csi-acards__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--csi-dark); transform: translate(-50%, -50%); transition: transform var(--csi-t-fast), background var(--csi-t-fast); } .csi-acards__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .csi-acards__item.is-open .csi-acards__toggle { background: var(--csi-green); border-color: var(--csi-green); } .csi-acards__item.is-open .csi-acards__toggle::before { background: var(--csi-white); } .csi-acards__item.is-open .csi-acards__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .csi-on-dark .csi-acards__toggle { flex-basis: 48px; height: 48px; border-radius: 50%; background: transparent; border-color: var(--csi-line-inverse); } .csi-on-dark .csi-acards__toggle::before, .csi-on-dark .csi-acards__toggle::after { background: var(--csi-white); } .csi-on-dark .csi-acards__item.is-open .csi-acards__toggle::before { transform: translate(-50%, -50%) rotate(45deg); } .csi-on-dark .csi-acards__item.is-open .csi-acards__toggle::after { transform: translate(-50%, -50%) rotate(-45deg); opacity: 1; background: var(--csi-white); } .csi-acards__trigger:focus-visible { outline: 2px solid var(--csi-green); outline-offset: 4px; } .csi-acards__panel { padding-bottom: 48px; } .csi-on-dark .csi-acards__panel { padding: 0 32px 40px calc(32px + 72px + 24px); } .csi-on-dark .csi-acards__item:not(.csi-acards__item--num) .csi-acards__panel { padding-left: 32px; } .csi-acards__text { max-width: 70ch; margin-bottom: 24px; font-size: 16px; line-height: 1.6; color: var(--csi-text-2); } .csi-on-dark .csi-acards__text { color: var(--csi-on-dark-2); } .csi-acards__note { display: flex; gap: 18px; max-width: 880px; margin-bottom: 24px; padding: 28px 32px 30px 24px; background: var(--csi-green); color: var(--csi-white); } .csi-acards__note-icon { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--csi-white); color: var(--csi-green); display: grid; place-items: center; } .csi-acards__note-icon svg { width: 16px; height: 16px; } .csi-acards__note-title { font-family: var(--csi-font-display); font-weight: 600; font-size: 17px; margin-bottom: 8px; } .csi-acards__note p:not(.csi-acards__note-title) { font-size: 15px; line-height: 1.6; } .csi-acards__grid { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; } .csi-acards__grid--logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); } .csi-acards__grid--text { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .csi-acards__grid--numbered { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .csi-acards__grid--logos .csi-acards__card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--csi-white); } .csi-acards__logo { display: flex; align-items: center; justify-content: center; height: 104px; margin-bottom: 14px; border: 1px solid var(--csi-line-soft); padding: 12px; } .csi-acards__logo img { max-width: 80%; max-height: 76px; width: auto; height: auto; object-fit: contain; } .csi-acards__name { font-family: var(--csi-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; } .csi-acards__line { font-size: 14px; color: var(--csi-text-3); overflow-wrap: anywhere; } .csi-acards__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 13px 16px; background: var(--csi-dark); color: var(--csi-white); font-family: var(--csi-font-display); font-weight: 500; font-size: 15px; text-decoration: none; transition: background var(--csi-t-fast); } .csi-acards__line + .csi-acards__btn, .csi-acards__name + .csi-acards__btn { margin-top: 14px; } .csi-acards__card { min-width: 0; } .csi-acards__grid--logos .csi-acards__card > .csi-acards__btn { margin-top: auto; } .csi-acards__btn svg { width: 18px; height: 18px; } .csi-acards__btn:hover, .csi-acards__btn:focus-visible { background: var(--csi-green); } .csi-acards__grid--text .csi-acards__card { padding: 30px 28px 34px; background: var(--csi-white); } .csi-acards__cardtitle { font-family: var(--csi-font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; } .csi-acards__grid--text p, .csi-acards__grid--numbered p { font-size: 15px; line-height: 1.65; color: var(--csi-text-2); } .csi-acards__grid--numbered .csi-acards__card { display: flex; gap: 24px; padding: 30px 24px; border: 1px solid var(--csi-line-inverse); background: rgba(255, 255, 255, 0.05); } .csi-on-light .csi-acards__grid--numbered .csi-acards__card { border-color: var(--csi-line); background: var(--csi-white); } .csi-acards__cardnum { flex: 0 0 auto; min-width: 36px; font-family: var(--csi-font-display); font-weight: 500; font-size: 22px; color: var(--csi-green-light); line-height: 1.2; } .csi-on-light .csi-acards__cardnum { color: var(--csi-green); } .csi-on-dark .csi-acards__cardtitle { color: var(--csi-white); font-size: 18px; } .csi-on-dark .csi-acards__grid--numbered p { color: var(--csi-on-dark-2); } .csi-acards__doc { margin-top: 28px; } .csi-acards__doc .csi-docpreview { margin-top: 24px; } @media (max-width: 1024px) { .csi-acards__grid--text, .csi-acards__grid--numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .csi-acards__list { margin-top: 40px; } .csi-acards__trigger { padding: 26px 0; gap: 16px; } .csi-on-dark .csi-acards__trigger { padding-inline: 20px; } .csi-acards__num { flex-basis: auto; } .csi-acards__toggle { flex-basis: 44px; height: 44px; } .csi-on-dark .csi-acards__panel, .csi-on-dark .csi-acards__item:not(.csi-acards__item--num) .csi-acards__panel { padding: 0 20px 28px; } .csi-acards__grid--text, .csi-acards__grid--numbered { grid-template-columns: 1fr; } .csi-acards__grid--logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .csi-acards__grid--logos .csi-acards__card { padding: 14px; } .csi-acards__logo { height: 80px; margin-bottom: 6px; } .csi-acards__name { font-size: 16px; } .csi-acards__btn { padding: 11px 12px; font-size: 14px; } .csi-acards__note { padding: 22px 20px; } } /* photo band (For traders) */ .csi-psplit { position: relative; overflow: hidden; background: var(--csi-dark); padding-block: var(--csi-section-y); } .csi-psplit__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .csi-psplit__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29, 39, 43, 0.92) 0%, rgba(29, 39, 43, 0.62) 55%, rgba(29, 39, 43, 0.5) 100%); } .csi-psplit__inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 64px; align-items: end; } .csi-psplit__left { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .csi-psplit__title { font-size: clamp(34px, 4.2vw, 60px); line-height: 0.98; letter-spacing: -0.045em; text-transform: uppercase; color: var(--csi-white); } .csi-psplit__line { display: block; } .csi-psplit__line--accent { color: var(--csi-green-light); } .csi-psplit__right { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 520px; } .csi-psplit__intro { font-size: 18px; line-height: 1.6; color: var(--csi-white); } /* process steps on a line */ .csi-ptime__steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px 32px; margin-top: 64px; list-style: none; padding: 0; } .csi-ptime__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--csi-green); } .csi-ptime__step { position: relative; display: flex; flex-direction: column; gap: 10px; padding-right: 16px; } .csi-ptime__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--csi-green); box-shadow: 0 0 0 6px var(--csi-green-tint); margin-bottom: 28px; } .csi-ptime__num { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; color: var(--csi-green); } .csi-ptime__title { font-family: var(--csi-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; } .csi-ptime__text { font-size: 15px; line-height: 1.65; color: var(--csi-text-2); } .csi-ptime__note { display: flex; align-items: center; gap: 20px; margin-top: 72px; padding: 18px 24px 18px 16px; background: var(--csi-grey); font-family: var(--csi-font-display); font-weight: 500; font-size: 16px; line-height: 1.45; } .csi-section--bg-grey .csi-ptime__note { background: var(--csi-white); } .csi-ptime__note img { flex: 0 0 44px; width: 44px; height: 44px; padding: 9px 12px; border-radius: 50%; background: var(--csi-green); filter: none; object-fit: contain; } @media (max-width: 720px) { .csi-ptime__steps { margin-top: 40px; gap: 28px; padding-left: 28px; } .csi-ptime__steps::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .csi-ptime__dot { position: absolute; left: -28px; top: 2px; margin: 0; } .csi-ptime__note { margin-top: 44px; align-items: flex-start; } } /* text left, cards right */ .csi-scards__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 96px; align-items: start; } .csi-scards__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .csi-scards__title { font-size: clamp(36px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.045em; text-transform: uppercase; } .csi-on-dark .csi-scards__title { color: var(--csi-white); } .csi-scards__intro { font-size: 17px; line-height: 1.65; color: var(--csi-text-2); max-width: 54ch; } .csi-on-dark .csi-scards__intro { color: var(--csi-on-dark-2); } .csi-scards__intro + .csi-button { margin-top: 12px; } .csi-scards__cards { display: grid; gap: 8px; list-style: none; padding: 0; } .csi-scards--grid .csi-scards__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csi-scards__card { display: flex; gap: 28px; padding: 28px 24px 30px; background: var(--csi-sand); } .csi-section--bg-sand .csi-scards__card { background: var(--csi-white); } .csi-scards__num { flex: 0 0 auto; min-width: 46px; font-family: var(--csi-font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--csi-green); } .csi-scards__label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; color: var(--csi-text-3); } .csi-scards__cardtitle { font-family: var(--csi-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; margin-bottom: 10px; } .csi-scards__card p { font-size: 15px; line-height: 1.6; color: var(--csi-text-2); } .csi-scards--grid .csi-scards__card { display: block; padding: 28px 26px 30px; } .csi-scards--grid .csi-scards__label { display: inline-block; margin-bottom: 22px; padding: 6px 10px; background: var(--csi-green); color: var(--csi-white); letter-spacing: var(--csi-tracking-caps); } .csi-scards--grid .csi-scards__cardtitle { text-transform: uppercase; font-size: 19px; letter-spacing: -0.02em; } .csi-on-dark .csi-scards__card { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--csi-line-inverse); } .csi-on-dark .csi-scards__cardtitle { color: var(--csi-white); } .csi-on-dark .csi-scards__card p { color: var(--csi-on-dark-2); } @media (max-width: 720px) { .csi-scards--grid .csi-scards__cards { grid-template-columns: 1fr; } .csi-scards__card { gap: 18px; padding: 22px 18px; } } /* document cards */ .csi-dcards__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .csi-dcards__title { font-size: clamp(38px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.05em; text-transform: uppercase; max-width: 14ch; } .csi-dcards__intro { max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--csi-text-2); } .csi-dcards__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; margin-top: 56px; list-style: none; padding: 0; } .csi-dcards__card { display: flex; flex-direction: column; padding: 32px; background: var(--csi-white); } .csi-dcards__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .csi-dcards__label { padding: 7px 10px; background: var(--csi-dark); color: var(--csi-white); font-size: 11px; font-weight: 600; letter-spacing: var(--csi-tracking-caps); text-transform: uppercase; } .csi-dcards__icon { color: var(--csi-green); } .csi-dcards__icon svg { width: 20px; height: 20px; } .csi-dcards__cardtitle { margin: 24px 0 16px; font-family: var(--csi-font-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.035em; text-transform: uppercase; } .csi-dcards__text { font-size: 16px; line-height: 1.6; color: var(--csi-text-2); max-width: 56ch; } .csi-dcards__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; list-style: none; padding: 0; } .csi-dcards__tags li { padding: 6px 10px; background: var(--csi-green-tint); font-size: 13px; color: var(--csi-text); } .csi-dcards__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 28px; } .csi-dcards .csi-docpreview { margin-top: 24px; } @media (max-width: 720px) { .csi-dcards__card { padding: 24px 20px; } .csi-dcards__grid { margin-top: 36px; } } /* CTA: text left, button below it */ .csi-cta-photo--stack .csi-cta-photo__inner { flex-direction: column; align-items: flex-start; gap: 40px; } .csi-cta-photo--stack .csi-cta-photo__title { text-transform: none; max-width: 15ch; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; } .csi-cta-photo--stack .csi-cta-photo__text { max-width: 50ch; } html[lang^="de"] :is(.csi-acards__title, .csi-psplit__title, .csi-scards__title, .csi-dcards__title, .csi-dcards__cardtitle, .csi-ptime__title) { hyphens: auto; -webkit-hyphens: auto; } .csi-cta-photo--band .csi-cta-photo__kicker + .csi-cta-photo__title { margin-top: 22px; } /* S4zi: space between the boxed kicker and the title */ /* VP pins 14.10.2026: strip links look like buttons (#52); open section without accordion (#54); lead line and small title above the cards (#80, #84, #88, #92); document cards on dark like the other dMRV section (#62) */ .csi-page-hero__strip a { padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.4); transition: background var(--csi-t-fast), color var(--csi-t-fast), border-color var(--csi-t-fast); } .csi-page-hero__strip a:hover, .csi-page-hero__strip a:focus-visible { background: var(--csi-green); border-color: var(--csi-green); color: var(--csi-white); } .csi-page-hero__strip-inner { gap: 10px 12px; } .csi-page-hero__strip-label { margin-right: 12px; } .csi-acards__list--open { border-top: 0; } .csi-acards__list--open .csi-acards__item { border-bottom: 0; background: none; } .csi-acards__list--open .csi-acards__panel, .csi-on-dark .csi-acards__list--open .csi-acards__panel, .csi-on-dark .csi-acards__list--open .csi-acards__item:not(.csi-acards__item--num) .csi-acards__panel { padding: 0; } .csi-scards__lead { font-family: var(--csi-font-display); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; color: var(--csi-text); } .csi-on-dark .csi-scards__lead { color: var(--csi-white); } .csi-scards__lead + .csi-scards__intro { margin-top: -8px; } .csi-scards__right { min-width: 0; } .csi-scards__cards-title { margin-bottom: 16px; font-size: var(--csi-text-xs); font-weight: 600; letter-spacing: var(--csi-tracking-caps-wide); text-transform: uppercase; color: var(--csi-text-3); } .csi-on-dark .csi-scards__cards-title { color: var(--csi-green-light); } .csi-scards__title { text-transform: none; letter-spacing: -0.04em; } /* layout "top": title above, the cards in one row below across the full width (pin #174, 15.10.2026) */ .csi-scards--top .csi-scards__inner { grid-template-columns: 1fr; gap: 40px; } .csi-scards--top.csi-scards--grid .csi-scards__cards { gap: 24px; } .csi-scards--top .csi-scards__card { padding: 36px 36px 40px; } @media (max-width: 720px) { .csi-scards--top .csi-scards__card { padding: 24px 20px 28px; } } .csi-on-dark .csi-dcards__title { color: var(--csi-white); } .csi-on-dark .csi-dcards__intro { color: var(--csi-on-dark-2); } .csi-section.csi-on-dark + .csi-section.csi-dcards.csi-on-dark { padding-top: 0; } /* document cards are white also on a dark section: their own text and button colours (pin #62) */ .csi-dcards__card { color: var(--csi-text); } .csi-on-dark .csi-dcards__cardtitle { color: var(--csi-text); } .csi-on-dark .csi-dcards__text { color: var(--csi-text-2); } .csi-on-dark .csi-dcards__card .csi-button--ghost { color: var(--csi-dark); border-color: var(--csi-line); background: transparent; } .csi-on-dark .csi-dcards__card .csi-button--ghost:hover, .csi-on-dark .csi-dcards__card .csi-button--ghost:focus-visible { background: var(--csi-dark); color: var(--csi-white); border-color: var(--csi-dark); } .csi-dcards__title { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.045em; max-width: 18ch; } /* another form in the contact-form section (S4zk: TAK consultation): fields in their own order, no contact-form grid */ .csi-section.csi-contact-form--other .fluentform fieldset { display: block; } .csi-section.csi-contact-form--other .fluentform fieldset > .ff-el-group { grid-column: auto; grid-row: auto; } .csi-contact-form--other .ff-el-section-break { margin-top: 28px; } /* Buyers & Traders pins 14.10.2026: trader buttons green, black on hover (#122); larger "For traders" label (#128); documents only in the requirements, preview next to download (#130) */ .csi-acards__btn { background: var(--csi-green); } .csi-acards__btn:hover, .csi-acards__btn:focus-visible { background: var(--csi-dark); } /* 15.10.2026 (Barbara): the label stays white on the dark hover background (was black from the global link hover) */ .csi-acards__btn:hover, .csi-acards__btn:focus-visible, .csi-acards__btn:hover span, .csi-acards__btn:focus-visible span { color: var(--csi-white); } .csi-psplit .csi-eyebrow { font-size: 15px; padding: 10px 18px; letter-spacing: 0.16em; } .csi-acards__doc-buttons { gap: 10px; } .csi-on-light .csi-acards__doc .csi-button--ghost { color: var(--csi-dark); border-color: var(--csi-line); } /* S6-2 (15.10.2026): the rule above outweighed the ghost hover (same specificity, later file) - dark label on the dark hover fill */ .csi-on-light .csi-acards__doc .csi-button--ghost:hover, .csi-on-light .csi-acards__doc .csi-button--ghost:focus-visible, .csi-on-light .csi-acards__doc .csi-button--ghost:active { background: var(--csi-dark); color: var(--csi-white); border-color: var(--csi-dark); }