:root {
--template: "campaign 2026 Q4 v5";
--body-stops: #f1faff, #f1faff, #fff, #eaf2ff;
--navbar-height: 7rem;
--filterbar-height: 5rem;
--headerbar-height: 0;
--scroll-padding-top: 2rem;
--header-bg: color-mix(in srgb, var(--color-white) 40%, transparent);
--menu-bg: #f4f6f7;
--menu-text: #666;
--menu-heading: #888;
--menu-link: #0046ad;
--text-black: #000;
--text-muted: #999;
--gradient-cta: linear-gradient(90deg, #0046ad 0%, #1132ff 15%, #014cff 26%, #0063ff 40%, #0073ff 62%, #0087ff 100%);
--color-white: #fff;
--color-black: #000;
--color-text-sec: #444;
--color-text-ter: #666;
--color-blue: #2563eb;
--color-blue-main: #0046ad;
--color-card-bg: #f0f1f5;
--color-card-bg-hover: #e2e3e8;
--color-main-bg: #f9f9f9;
--color-footer-bg: #f8f8fb;
--color-overlay-bg: #8ba0c133;
--shadow-soft: 0 4px 8px #0000001a;
--shadow-card: 0 2px 3px #0003;
--transition: all .5s ease;
--gap-thin: .5rem;
--gap-min: 1rem;
--gap-min2: 1.5rem;
--gap-med: 2rem;
--gap-max: 3rem;
--gap-big: 5rem;
--radius-base: 6px;
--radius-card: 8px;
--radius-big: 16px;
--icon-check-size: 24px;
--img-width: 8rem;
}
@media (width > 768px) {
:root {
--img-width: 10rem;
}
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--scroll-padding-top);
overflow-x: clip !important;
}
html:has(#sticky-navbar) {
--headerbar-height: var(--navbar-height);
--scroll-padding-top: var(--headerbar-height);
}
body {
background: linear-gradient(to bottom, var(--body-stops));
font-size: 16px !important;
overflow-x: clip !important;
}
body .content-frame .container .content {
gap: var(--gap-big);
flex-direction: column;
display: flex;
}
@media (width > 768px) {
body .content-frame .container .content {
gap: 7rem;
}
}
body .content-frame .container .content > div:first-child:has(h1) {
display: none;
}
body .content-frame .container .content > hr {
border-color: #6f9fcf;
margin-block: unset !important;
}
body:has(.content > div:last-of-type.breakout) .content-frame .container .content, body:has(.content > div:last-of-type.breakout) .content > div:last-of-type.breakout, body:has(.content > div:last-of-type.breakout) footer {
margin-block: unset !important;
}
.content-frame .container > .row {
display: block !important;
}
.hidden {
display: none !important;
}
.collapsed {
max-height: 0 !important;
}
.elementlist.compact > div > * {
margin-bottom: unset !important;
}
body {
font-size: 1.6rem !important;
}
@media (width > 768px) {
body {
font-size: 1.8rem !important;
}
}
h2 {
font-weight: 700 !important;
line-height: 1.4 !important;
}
.content-frame > .container > div > .content > div > .textfragment h2 {
font-size: 2.6rem !important;
}
h5 {
font-size: 1.6rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
@media (width > 768px) {
h5 {
font-size: 1.8rem !important;
}
}
p {
letter-spacing: .36px !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
line-height: normal !important;
}
@media (width > 768px) {
p {
font-size: 1.8rem !important;
}
}
.richtext ul li {
font-size: 1.6rem !important;
}
@media (width > 768px) {
.richtext ul li {
font-size: 1.8rem !important;
}
}
.split-title h2 span, .split-title h3 span {
font-size: .7em;
display: block;
}
.add-cta {
--cta-height: 3.6rem;
position: relative;
margin-bottom: var(--cta-height) !important;
}
.add-cta.cta-large {
--cta-height: 6.1rem !important;
}
@media (width <= 768px) {
.add-cta > :nth-last-child(2) {
padding-bottom: calc(var(--cta-height) / 2) !important;
}
}
.add-cta .btn-cta {
height: auto !important;
margin: 0 !important;
}
.btn-cta {
background: var(--gradient-cta) !important;
}
.teaser.teaser-standard {
--button-text-color: #fff;
--button-border-color: transparent;
--button-bg-color: var(--color-blue-main);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
transition: var(--transition);
align-items: center;
overflow: clip;
background: linear-gradient(to top, var(--color-card-bg) 0%, color-mix(in srgb, var(--color-card-bg) 50%, var(--color-white)) 100%) !important;
}
.teaser.teaser-standard:hover {
background: linear-gradient(to top, var(--color-card-bg-hover) 0%, color-mix(in srgb, var(--color-card-bg-hover) 50%, var(--color-white)) 100%) !important;
}
.teaser.teaser-standard > * {
color: var(--color-blue-main);
max-width: unset !important;
}
.teaser.teaser-standard .image-wrapper {
width: 100% !important;
margin: unset !important;
}
@media (width > 768px) {
.teaser.teaser-standard .teaser-meta {
padding: unset !important;
}
}
.teaser.teaser-standard .teaser-more {
margin-top: 1rem !important;
}
.teaser.teaser-standard .teaser-more:before {
transition: var(--transition);
display: inline-block;
}
.teaser.teaser-standard .teaser-more .material-icons {
display: none;
}
.teaser.teaser-standard:hover .teaser-more.btn {
color: var(--button-text-color) !important;
border-color: var(--button-border-color) !important;
background-color: var(--button-bg-color) !important;
}
.teaser.teaser-standard:hover .teaser-more.btn:before {
background-color: var(--button-text-color) !important;
}
.hide-more .teaser-more {
display: none !important;
}
@media (width <= 768px) {
.text-centered-sm * {
text-align: center;
}
}
@media (width > 768px) {
.width-80-xl {
width: 80%;
margin-inline: auto;
}
}
.stage-area {
background: linear-gradient(#6f9fcf 0%, #e2e8f2 50%, #d5e2ea 100%);
}
@media (width > 768px) {
.stage-area {
background: linear-gradient(#fcfcfa 0%, #f4f4f9 50%, #d1e5ee 100%);
}
}
.stage-area > div > .elementlist {
display: contents;
}
.stage-area > div > .elementlist:after {
content: "";
width: calc(var(--stage-font-size) * 11);
aspect-ratio: 1;
border: calc(var(--stage-font-size) * .25) solid var(--tdk-color-blue-30);
border-left-color: var(--tdk-color-blue);
border-radius: 50%;
animation: 1s linear infinite rotate;
translate: -50% -50%;
z-index: 0 !important;
grid-area: 2 / 3 !important;
display: block !important;
}
.stage-area > div > .elementlist > * {
z-index: 1 !important;
}
.stage-area > div > .elementlist > div > div.image-wrapper:after {
display: none !important;
}
body:has(#sticky-navbar):not(.mobile-flyout-is-open) {
padding-top: unset !important;
}
body:has(#sticky-navbar):not(.mobile-flyout-is-open) header {
position: relative !important;
}
#sticky-navbar {
z-index: 1050;
height: var(--navbar-height);
background-color: var(--header-bg);
opacity: 0;
border-bottom: 1.5px solid #6664;
justify-content: space-between;
align-items: center;
transition: all .3s ease-in-out;
display: flex;
position: fixed;
inset: 0 0 auto;
transform: translateY(-100%);
box-shadow: 0 2px 5px #00000026;
margin-top: 0 !important;
padding: 0 2rem !important;
}
#sticky-navbar.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (width > 768px) {
#sticky-navbar {
justify-content: space-around;
}
}
@supports (backdrop-filter: initial) {
#sticky-navbar {
backdrop-filter: saturate(180%) blur(20px);
}
}
#sticky-navbar .textfragment, #sticky-navbar .row, #sticky-navbar .col-12 {
display: contents;
}
#sticky-navbar h2 {
cursor: pointer;
order: 0;
margin: unset !important;
font-size: 2rem !important;
font-weight: 400 !important;
}
@media (width > 768px) {
#sticky-navbar h2 {
font-size: 2.6rem !important;
}
}
@media (width <= 768px) {
#sticky-navbar h2 em {
display: none;
}
}
@media (width > 768px) {
#sticky-navbar h2 em {
color: var(--text-muted);
font-style: italic;
font-weight: 400;
}
}
#sticky-navbar .contents {
display: flex;
}
@media (width <= 768px) {
#sticky-navbar .contents {
inset: var(--navbar-height) 0 auto;
background-color: color-mix(in srgb, var(--color-white) 97%, transparent);
gap: var(--gap-med);
flex-direction: column;
max-height: 0;
padding-block: 0;
padding-inline: 2rem;
transition: all .5s, max-height .3s ease-out;
position: absolute;
overflow: clip;
box-shadow: 0 2px 5px #00000026;
}
}
@media (width > 768px) {
#sticky-navbar .contents {
justify-content: flex-end;
align-items: center;
gap: var(--gap-big);
flex-wrap: nowrap;
}
}
@media (width <= 768px) {
#sticky-navbar .contents .menu {
margin-top: 2rem;
}
}
#sticky-navbar .contents .menu > section > ul {
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#sticky-navbar .contents .menu li > ul {
flex-direction: column;
gap: 10px;
margin: 10px 0 0;
padding: 0 0 0 20px;
list-style: none;
display: flex;
}
#sticky-navbar .contents .btn-primary {
background: var(--gradient-cta);
margin: unset !important;
}
@media (width <= 768px) {
#sticky-navbar.is-expanded {
background-color: color-mix(in srgb, var(--color-white) 99%, transparent);
}
#sticky-navbar.is-expanded .contents {
background-color: color-mix(in srgb, var(--color-white) 97%, transparent);
max-height: 100vh;
padding-bottom: 2rem;
transition: all .5s, max-height .3s ease-in;
}
}
#sticky-navbar .menu-toggle {
cursor: pointer;
color: #4c595d;
outline: unset;
background: none;
border: none;
flex-shrink: 0;
order: 1;
justify-content: center;
align-items: center;
gap: 10px;
padding: 0;
display: inline-flex;
}
#sticky-navbar .menu-toggle .label {
letter-spacing: .36px;
white-space: nowrap;
font-size: 18px;
font-weight: 400;
}
@media (width <= 768px) {
#sticky-navbar .menu-toggle .label {
display: none;
}
}
#sticky-navbar .menu-toggle .icon {
width: 24px;
height: 24px;
color: inherit;
background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 9' xmlns='http://www.w3.org/2000/svg'><path d='M1 1 L9 8 L17 1' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' /></svg>") center / contain no-repeat;
transition: transform .2s;
display: inline-flex;
}
@media (width > 768px) {
#sticky-navbar.simple {
overflow: clip;
}
}
#sticky-navbar.simple.is-expanded .icon {
transform: scaleY(-1);
}
#sticky-navbar.simple ul {
display: flex;
}
@media (width <= 768px) {
#sticky-navbar.simple ul {
gap: var(--gap-min);
flex-direction: column;
}
}
@media (width > 768px) {
#sticky-navbar.simple ul {
gap: var(--gap-med);
}
}
#sticky-navbar.simple .btn {
order: 99;
}
@media (width > 768px) {
#sticky-navbar.simple .menu-toggle {
display: none;
}
}
#sticky-navbar.simple .menu-toggle .label {
display: none;
}
#sticky-navbar.expandable.is-expanded {
box-shadow: 0 2px 2.5px #0003;
}
#sticky-navbar.expandable .menu-toggle {
display: inline-flex;
}
#sticky-navbar.expandable .menu {
display: none;
}
#sticky-navbar.expandable.is-expanded .menu {
background: var(--menu-bg);
flex-direction: column;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
max-width: 1170px;
margin: 0 auto;
padding: 15px;
display: flex;
}
@media (width > 768px) {
#sticky-navbar.expandable.is-expanded .menu {
z-index: -1;
flex-direction: row;
position: absolute;
top: 100%;
right: 20px;
box-shadow: 0 2px 5px #0003;
}
}
#sticky-navbar.expandable.is-expanded .menu section {
width: 100%;
padding: 10px 0;
}
@media (width <= 768px) {
#sticky-navbar.expandable.is-expanded .menu section + section {
border-top: 1px solid #555;
margin-top: 10px;
padding-top: 20px;
}
}
@media (width > 768px) {
#sticky-navbar.expandable.is-expanded .menu section {
padding: 10px 0;
}
}
#sticky-navbar.expandable.is-expanded .menu section h3 {
font-weight: 700;
}
@media (width > 768px) {
#sticky-navbar.expandable.is-expanded .menu section h3 {
letter-spacing: .36px;
color: var(--menu-heading);
margin: 0 0 10px;
font-size: 18px;
font-weight: 400;
}
}
#sticky-navbar.expandable.is-expanded .menu section h3 a {
color: var(--menu-link);
}
@media (width > 768px) {
#sticky-navbar.expandable.is-expanded .menu section h3 a {
color: inherit;
text-decoration: none;
}
}
#sticky-navbar.expandable.is-expanded .menu h4 {
color: var(--menu-text);
font-weight: 400;
}
@media (width > 768px) {
#sticky-navbar.expandable.is-expanded .menu h4 {
letter-spacing: .36px;
color: var(--menu-text);
margin: 0;
font-size: 18px;
font-weight: 700;
}
}
#sticky-navbar.expandable.is-expanded .menu li > ul {
padding-left: 10px;
}
#sticky-navbar.expandable.is-expanded .menu li > ul a {
color: var(--menu-link);
}
#sticky-navbar.expandable.is-expanded .menu a {
letter-spacing: .36px;
color: var(--menu-text);
font-size: 18px;
font-weight: 400;
text-decoration: none;
display: block;
}
#sticky-navbar.expandable.is-expanded .menu a:hover {
text-decoration: underline;
}
.key-selection {
--zx-keyselection: 1;
justify-content: space-between;
gap: var(--gap-max);
background: linear-gradient(135deg, #cfd1d4 0%, #aab4bf 50%, #b8b9bc 100%);
flex-direction: column;
max-width: 1200px;
margin: 0 -2rem;
padding: 2rem;
display: flex;
position: relative;
overflow: clip;
}
@media (width <= 768px) {
.key-selection {
width: calc(100% + 4rem);
min-height: 80vh;
}
}
@media (width > 768px) {
.key-selection {
height: 70rem;
margin-inline: unset;
align-items: flex-start;
padding: 5rem 7rem;
}
}
.key-selection .row:not(.elementlist), .key-selection .col-12 {
display: contents;
}
.key-selection > .textfragment {
z-index: calc(var(--zx-keyselection)  + 1);
position: relative;
}
.key-selection > .textfragment h2 {
max-width: 400px;
margin-block: 0 2rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.4;
}
@media (width > 768px) {
.key-selection > .textfragment h2 {
margin-bottom: 3rem;
font-size: 1.5rem;
}
}
.key-selection > .elementlist {
display: contents;
}
@media (width > 768px) {
.key-selection > .elementlist > div:first-child .elementlist > div:first-child {
display: none;
}
}
@media (width <= 768px) {
.key-selection > .elementlist > div:first-child .elementlist > div:last-child {
display: none;
}
}
.key-selection > .elementlist > div:first-child .elementlist .image-wrapper {
z-index: calc(var(--zx-keyselection)  - 1);
justify-content: center;
align-items: center;
display: flex;
position: absolute;
inset: 0;
}
.key-selection > .elementlist > div:first-child .elementlist .image-wrapper img {
object-fit: cover;
max-width: 100%;
height: 100%;
display: block;
}
.key-selection > .elementlist > div:last-child > div {
display: contents;
}
.key-selection > .elementlist > div:last-child > div .elementlist {
z-index: calc(var(--zx-keyselection)  + 1);
gap: var(--gap-min2);
flex-direction: column;
margin: 0 auto;
display: flex;
position: relative;
}
@media (width > 768px) {
.key-selection > .elementlist > div:last-child > div .elementlist {
width: 40%;
max-width: 30rem;
margin: 0;
}
}
.key-selection > .elementlist > div:last-child > div .elementlist > div {
width: 100%;
}
.key-selection .teaser {
justify-content: space-between;
align-items: center;
gap: var(--gap-med);
border-radius: 6px;
flex-wrap: nowrap;
display: flex;
box-shadow: 0 2px 10px #0000000d;
color: var(--color-black) !important;
background: var(--color-white) !important;
margin: unset !important;
padding: 1rem 1rem 1rem 1.5rem !important;
}
.key-selection .teaser * {
color: inherit !important;
}
.key-selection .teaser .text-column {
flex: 1 !important;
}
.key-selection .teaser .text-column .teaser-meta {
padding: unset !important;
}
.key-selection .teaser .text-column .teaser-meta .teaser-title {
margin: 0;
font-size: 1.9rem;
font-weight: 600;
line-height: 1.4;
}
.key-selection .teaser:after {
content: "";
background: #f2f2f2 url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.58317 0.75V12.4167M0.749837 6.58333L6.58317 12.4167L12.4165 6.58333' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
border-radius: 50%;
flex: 0 0 32px;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
display: flex;
}
.key-selection .teaser .teaser-more, .key-selection + hr {
display: none !important;
}
:root {
--portfolio-card-height: 24rem;
--zx-base: 1;
--zx-product-section: 15;
--zx-product-card: 10;
}
body:has(.key-selection) .portfolio {
--portfolio-card-height: 12rem;
}
.portfolio {
width: 100%;
max-width: 1200px;
margin-inline: auto;
}
.portfolio .col-12, .portfolio .row:not(.elementlist) {
display: contents;
}
.portfolio > .elementlist {
flex-direction: column;
place-items: stretch stretch;
display: flex;
}
.portfolio .portfolio-area {
transition: var(--transition);
--pic-ratio: 1;
position: relative;
margin: 0 !important;
}
.portfolio .portfolio-area.pic-ratio-16-9 {
--pic-ratio: calc(16 / 9);
}
.portfolio .portfolio-area.pic-ratio-3-2 {
--pic-ratio: calc(3 / 2);
}
.portfolio .portfolio-area * {
transition: var(--transition);
}
.portfolio .portfolio-area > .elementlist {
margin: 0 !important;
}
@media (width <= 768px) {
.portfolio .portfolio-area > .elementlist {
gap: 0 !important;
}
}
@media (width > 768px) {
.portfolio .portfolio-area > .elementlist {
gap: var(--gap-big);
flex-flow: row;
display: flex;
}
.portfolio .portfolio-area > .elementlist > :first-child {
flex: 0 1 calc(15% * var(--pic-ratio));
display: block !important;
}
}
.portfolio .portfolio-area > .elementlist > :last-child .portfolio-details {
z-index: var(--zx-base);
justify-content: center;
gap: var(--gap-min2);
flex-direction: column;
width: 100%;
padding-block: 2rem;
display: flex;
position: relative;
margin: unset !important;
}
@media (width > 768px) {
.portfolio .portfolio-area > .elementlist > :last-child .portfolio-details {
flex: 1;
}
}
.portfolio .portfolio-area > .elementlist > :last-child .portfolio-details > .textfragment h2 {
margin: 0;
font-size: 2.2rem;
}
@media (width > 768px) {
.portfolio .portfolio-area > .elementlist > :last-child .portfolio-details > .textfragment h2 {
font-size: 2.6rem;
}
.portfolio .portfolio-area > .elementlist > :last-child .portfolio-details > .textfragment h5 {
margin: 0;
}
}
.portfolio .portfolio-area.portfolio-collapsed {
cursor: pointer;
background: var(--color-card-bg);
background: linear-gradient(to top, var(--color-card-bg) 0%, var(--color-white) 100%);
border-radius: var(--radius-big);
box-shadow: var(--shadow-card);
flex-basis: 100%;
overflow: clip;
}
.portfolio .portfolio-area.portfolio-collapsed * {
color: var(--color-blue-main);
}
.portfolio .portfolio-area.portfolio-collapsed:before {
cursor: pointer;
content: "";
z-index: var(--zx-product-section);
position: absolute;
inset: 0;
}
.portfolio .portfolio-area.portfolio-collapsed:after {
content: "+";
z-index: calc(var(--zx-product-section)  - 1);
color: #333;
background-color: #ffffffe6;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 3.6rem;
height: 3.6rem;
font-size: 2rem;
display: flex;
position: absolute;
top: 2rem;
right: 2rem;
box-shadow: 0 2px 5px #0000001a;
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-collapsed:after {
background-color: #f0f0f0;
top: 50%;
right: 3rem;
transform: translateY(-50%);
}
}
.portfolio .portfolio-area.portfolio-collapsed > * {
color: var(--color-blue-main);
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist {
height: var(--portfolio-card-height);
}
@media (width <= 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child:before {
content: "";
z-index: var(--zx-base);
background: linear-gradient(to top, #fff 0%, #fffc 50%, #fff0 100%);
position: absolute;
inset: 0;
}
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child div:not(.image-wrapper) {
display: contents;
}
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child .image-wrapper {
height: 100% !important;
margin: 0 !important;
}
@media (width <= 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child .image-wrapper {
z-index: 0;
position: absolute;
inset: 0;
}
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child .image-wrapper img {
object-fit: cover;
width: 100%;
height: 100%;
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :first-child .elementlist {
display: none !important;
}
@media (width <= 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details {
justify-content: flex-end;
gap: var(--gap-min);
padding: 2rem;
}
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details {
padding-right: 8rem;
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .textfragment {
display: contents;
}
}
@media (width <= 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .textfragment .teaser-text {
display: none !important;
}
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .textfragment .teaser-text {
display: contents;
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .textfragment .teaser-text p, .portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .textfragment .teaser-text ul {
display: none !important;
}
}
.portfolio .portfolio-area.portfolio-collapsed > .elementlist > :last-child .portfolio-details .elementlist {
display: none !important;
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child {
top: calc(var(--navbar-height)  + 2rem);
flex: 0 40%;
align-self: flex-start;
position: sticky;
}
}
@media (width > 992px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child {
--main-box: 960px;
--left-col: .3;
--image-width: calc(((100vw - var(--main-box)) / 2)  + (var(--main-box) * var(--left-col))  - 10rem);
height: calc(var(--image-width) / var(--pic-ratio)  + 5rem);
}
}
@media (width > 1200px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child {
--main-box: 1200px;
--left-col: .4;
}
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child div {
display: contents;
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child .image-wrapper {
display: block !important;
}
@media (width <= 768px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child .image-wrapper {
width: calc(100% + 4rem);
margin-inline: -2rem;
}
}
@media (width > 992px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :first-child .image-wrapper {
width: var(--image-width);
position: absolute;
right: 0;
}
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details {
width: 100%;
padding-inline: unset !important;
gap: var(--gap-max) !important;
gap: var(--gap-big) !important;
}
@media (width > 1200px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details {
padding-block: 5rem;
}
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment {
gap: var(--gap-min2);
flex-direction: column;
width: 100%;
display: flex;
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment h2 {
font-size: 2.6rem !important;
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment .teaser-text .richtext {
gap: var(--gap-med);
flex-direction: column;
display: flex;
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment .teaser-text .richtext * {
margin: unset !important;
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment ul {
gap: var(--gap-thin);
flex-direction: column;
display: flex;
margin: unset !important;
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .textfragment {
gap: 2rem;
}
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .elementlist {
gap: var(--gap-max);
flex-direction: column;
width: 100%;
display: flex;
margin: unset !important;
}
@media (width > 900px) {
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .elementlist {
gap: var(--gap-big);
}
}
.portfolio .portfolio-area.portfolio-open > .elementlist > :last-child .portfolio-details > .elementlist > * {
width: 100%;
}
.portfolio .portfolio-area.portfolio-open:has(.product-filters) .product-cluster {
scroll-margin-top: 5rem !important;
}
@media (width > 768px) {
.portfolio .portfolio-area.portfolio-open:has(.product-filters) .product-cluster {
scroll-margin-top: 7rem !important;
}
}
.portfolio .product-filters {
--margin: 2rem;
z-index: calc(var(--zx-product-card)  + 10);
width: calc(100% + var(--margin) * 2);
background-color: var(--header-bg);
padding: 1rem var(--margin);
justify-content: flex-end;
align-self: flex-start;
align-items: center;
gap: var(--gap-min);
flex-wrap: nowrap;
display: flex;
position: sticky;
margin: 0 calc(var(--margin) * -1) !important;
}
@supports (backdrop-filter: initial) {
.portfolio .product-filters {
backdrop-filter: blur(30px);
}
}
@media (width <= 768px) {
.portfolio .product-filters {
top: var(--navbar-height);
border-bottom: 1px solid #ccc;
}
}
@media (width > 768px) {
.portfolio .product-filters {
top: calc(var(--navbar-height)  + 2rem);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
}
.portfolio .product-filters:before {
content: "Filter Products:";
flex: 1;
justify-self: flex-start;
font-size: 1.4rem !important;
}
@media (width > 768px) {
.portfolio .product-filters:before {
font-size: 1.6rem !important;
}
}
.portfolio .product-filters a.filter {
cursor: pointer;
color: var(--color-blue);
background-color: var(--color-white);
border-radius: var(--radius-base);
border: 1.5px solid var(--color-blue);
padding: .6rem .8rem;
line-height: 1;
text-decoration: none;
font-size: 1.4rem !important;
}
@media (width > 768px) {
.portfolio .product-filters a.filter {
font-size: 1.6rem !important;
}
}
.portfolio .product-filters a.filter.active-filter {
color: var(--color-white);
background-color: var(--color-blue);
}
.portfolio .benefits * {
margin: unset !important;
}
.portfolio .benefits > .elementlist {
flex-direction: column;
width: 100%;
display: flex;
gap: var(--gap-med) !important;
}
.portfolio .benefits > .elementlist .benefit {
align-items: flex-start;
gap: var(--gap-min2);
border-radius: 6.669px;
width: 100%;
display: flex;
position: relative;
}
.portfolio .benefits > .elementlist .benefit:before {
content: "";
flex: 0 0 var(--icon-check-size);
width: var(--icon-check-size);
height: var(--icon-check-size);
background-image: url("data:image/svg+xml;charset=UTF-8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M23.0645 10.9328V11.9554C23.0631 14.3523 22.287 16.6846 20.8518 18.6044C19.4166 20.5242 17.3993 21.9287 15.1007 22.6083C12.8022 23.2879 10.3455 23.2063 8.09705 22.3756C5.84865 21.5449 3.92899 20.0097 2.62438 17.9989C1.31978 15.9881 0.700124 13.6094 0.857835 11.2177C1.01555 8.82593 1.94217 6.54924 3.49952 4.72715C5.05687 2.90505 7.16149 1.63519 9.4995 1.10695C11.8375 0.578705 14.2837 0.820383 16.4731 1.79594M8.61451 10.8439L11.9491 14.1785L23.0645 3.06309\" stroke=\"black\" stroke-width=\"1.66731\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
}
.portfolio .benefits > .elementlist .benefit .textfragment {
gap: var(--gap-thin);
flex-direction: column;
flex: 1 1 0;
min-width: 0;
display: flex;
}
.portfolio .benefits > .elementlist .benefit .textfragment h2 {
font-size: 1.6rem !important;
}
@media (width > 768px) {
.portfolio .benefits > .elementlist .benefit .textfragment h2 {
font-size: 1.8rem !important;
}
}
.portfolio .benefits > .elementlist .benefit .teaser-text .richtext p {
letter-spacing: .3px;
font-size: 15px;
font-weight: 400;
line-height: normal;
}
.portfolio .product-cluster {
gap: var(--gap-max);
flex-direction: column;
width: 100%;
max-height: 2000px;
transition: max-height .5s ease-in-out;
display: flex;
padding-top: 2rem !important;
}
.portfolio .product-cluster > .textfragment {
gap: var(--gap-med);
flex-direction: column;
width: 100%;
display: flex;
}
.portfolio .product-cluster > .textfragment h2 {
margin: unset !important;
font-size: 2.2rem !important;
}
.portfolio .product-cluster > .textfragment h5 {
margin-bottom: var(--gap-med) !important;
}
.portfolio .product-cluster > .textfragment .teaser-text .richtext {
display: contents;
}
.portfolio .product-cluster > .elementlist {
--margin-extra: 5px;
width: calc(100% + 2 * var(--margin-extra));
flex-direction: column;
transition: max-height .5s ease-in-out;
display: flex;
gap: var(--gap-med) !important;
padding: var(--margin-extra) !important;
margin-inline: calc(var(--margin-extra) * -1) !important;
margin-block: unset !important;
}
.portfolio .product-cluster > .elementlist:has( > :nth-child(4)):not(.is-expanded) {
cursor: pointer;
--fade-color: #f8fafc;
flex-wrap: nowrap;
max-height: 280px;
position: relative;
overflow: hidden;
}
.portfolio .product-cluster > .elementlist:has( > :nth-child(4)):not(.is-expanded):before {
content: "";
z-index: calc(var(--zx-product-card)  + 5);
background: linear-gradient(to bottom, transparent 0%, var(--fade-color) 85%);
height: 130px;
position: absolute;
inset: auto -5px -5px;
}
.portfolio .product-cluster > .elementlist:has( > :nth-child(4)):not(.is-expanded):after {
content: "+ Expand section";
z-index: calc(var(--zx-product-card)  + 6);
text-align: center;
color: var(--color-white);
background-color: var(--color-blue);
border-radius: var(--radius-base);
box-shadow: var(--shadow-card);
padding: .8rem 1.2rem;
font-size: 1.4rem;
line-height: 1;
display: inline-block;
position: absolute;
bottom: 10px;
left: 50%;
translate: -50%;
}
.portfolio .product-cluster > .elementlist:has( > :nth-child(4)):not(.is-expanded):hover:after {
background-color: var(--color-blue-main);
}
.portfolio .product-cluster > .elementlist > div:has(.series) .series {
z-index: calc(var(--zx-product-card)  - 2) !important;
}
.portfolio .product-cluster > .elementlist > div:has(.series) + div:has(.series) .series {
z-index: calc(var(--zx-product-card)  - 4) !important;
}
.portfolio .product-cluster > .elementlist > div:has(.series) + div:has(.series) + div:has(.series) .series {
z-index: calc(var(--zx-product-card)  - 6) !important;
}
.portfolio .product-cluster > .elementlist > div:has(.series) + div:has(.series) + div:has(.series) + div:has(.series) .series {
z-index: calc(var(--zx-product-card)  - 8) !important;
}
.portfolio .product-card {
z-index: var(--zx-product-card);
width: 100%;
transition: max-height .5s;
position: relative;
margin: unset !important;
flex: 1 0 auto !important;
}
.portfolio .product-card a {
grid-template-columns: var(--img-width) auto;
gap: var(--gap-med);
grid-template-rows: auto;
height: auto !important;
padding: var(--gap-min) !important;
margin: unset !important;
display: grid !important;
}
@media (width > 768px) {
.portfolio .product-card a {
gap: var(--gap-max);
padding: var(--gap-min2) !important;
}
}
.portfolio .product-card a > * {
display: contents;
}
.portfolio .product-card a * {
color: var(--color-blue-main);
font-size: 1.5rem !important;
}
.portfolio .product-card a .image-wrapper {
grid-area: 1 / 1;
justify-content: center;
align-items: center;
display: flex;
overflow: hidden;
}
.portfolio .product-card a .teaser-meta {
grid-area: 1 / 2;
align-self: center;
padding: unset !important;
}
.portfolio .product-card a .teaser-meta h3 {
font-size: 2rem;
font-weight: 700;
margin: unset !important;
}
.portfolio .product-card a .teaser-meta .teaser-text {
padding: unset;
display: block !important;
}
@media (width <= 768px) {
.portfolio .product-card a .teaser-more {
text-align: left;
white-space: normal;
white-space-collapse: unset;
display: inline-block;
position: relative;
background: unset !important;
border: unset !important;
padding: unset !important;
padding-left: 1.2em !important;
}
.portfolio .product-card a .teaser-more:before {
position: absolute;
top: .17em;
left: 0;
}
.portfolio .product-card a .teaser-more:hover {
background: unset !important;
}
.portfolio .product-card a .teaser-more span {
display: inline;
}
}
.portfolio .product-card.active-card a {
box-shadow: var(--shadow-card), 0 0 5px var(--color-blue);
}
.portfolio .product-card:not(.series).flag:after {
color: var(--color-blue);
text-transform: uppercase;
padding: 2px 6px;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 0;
right: 0;
}
.portfolio .product-card:not(.series).flag.psu:after {
content: "psu";
}
.portfolio .product-card:not(.series).flag.sst:after {
content: "sst";
}
.portfolio .product-card:not(.series).flag.psu.sst:after {
content: "psu + sst";
}
.portfolio .product-card:not(.series).flag.ups:after {
content: "ups";
}
.portfolio .product-card:not(.series).flag.psu.ups:after {
content: "psu + ups";
}
.portfolio .product-card:not(.series).flag.sst.ups:after {
content: "sst + ups";
}
.portfolio .product-card:not(.series).flag.computing:after {
content: "comp";
}
.portfolio .product-card:not(.series).flag.optical:after {
content: "opt";
}
.portfolio .product-card:not(.series).flag.computing.optical:after {
content: "comp + opt";
}
.portfolio .product-card:not(.series).flag .teaser-meta {
padding-top: var(--gap-thin) !important;
}
.portfolio .product-card.series {
margin-top: -3.5rem !important;
}
.portfolio .product-card.series a {
padding-top: var(--gap-med) !important;
}
@media (width > 768px) {
.portfolio .product-card.series a {
padding-top: var(--gap-max) !important;
}
}
.portfolio .product-card.series a .teaser-meta {
padding-top: var(--gap-thin) !important;
}
.portfolio .product-card.series a .teaser-meta h3, .portfolio .product-card.series a .teaser-meta .teaser-text {
display: none !important;
}
.portfolio .product-card.series a .teaser-meta .teaser-more {
margin: unset !important;
}
#portfolio_sdv .portfolio-area.portfolio-collapsed, #portfolio_sdv .portfolio-area.portfolio-collapsed > .elementlist > :first-child .image-wrapper {
max-height: 250px;
}
@media (width > 992px) {
#portfolio_sdv .portfolio-area.portfolio-open > .elementlist > :first-child {
--main-box: 960px;
--left-col: .3;
--image-width: calc(((100vw - var(--main-box)) / 2)  + (var(--main-box) * var(--left-col))  - 10rem);
height: calc(var(--image-width)  + 5rem);
}
}
#application-guide div, #application-guide a.teaser {
margin-bottom: unset;
}
@media (width > 768px) {
#application-guide a.teaser {
--gutter: var(--gap-max);
gap: var(--gutter);
}
#application-guide a.teaser > :first-child {
--colsize: calc(3 * var(--colfract)  - var(--gutter)) !important;
}
#application-guide a.teaser > :last-child {
--colsize: calc(9 * var(--colfract)  - var(--gutter)) !important;
}
}
#contact {
--color-primary: #0062e1;
--color-text: #000;
--color-text-secondary: #555d64;
--color-border: #d1d8dc;
--color-input-bg: #fafafa;
--color-linkedin: #0077b5;
--color-white: #fff;
--radius-input: 6px;
--radius-icon: 3px;
--radius-card-mobile: 10px;
--radius-card-desktop: 16px;
--shadow-card: 0 2px 5px #0003;
--gap-section-mobile: 32px;
--gap-section-desktop: 96px;
background: linear-gradient(#d6e3e6 0%, #fff 40%, #eef6f2 100%);
}
#contact > .elementlist {
margin-inline: auto !important;
}
@media (width > 576px) {
#contact > .elementlist {
max-width: 560px;
}
}
@media (width > 768px) {
#contact > .elementlist {
max-width: 740px;
}
}
@media (width > 992px) {
#contact > .elementlist {
max-width: 980px;
}
}
@media (width > 1200px) {
#contact > .elementlist {
max-width: 1160px;
}
}
#contact > .elementlist .inner {
gap: var(--gap-section-mobile);
flex-direction: column;
display: flex;
}
@media (width > 992px) {
#contact > .elementlist .inner {
align-items: center;
gap: var(--gap-big);
margin: unset;
grid-template-rows: auto 1fr;
grid-template-columns: 340px 1fr;
padding-block: 6rem;
display: grid;
}
#contact > .elementlist .inner > .textfragment {
grid-area: 1 / 1;
align-self: start;
}
}
#contact > .elementlist .inner > .textfragment h2 {
letter-spacing: -1px;
font-size: 36px !important;
}
@media (width > 992px) {
#contact > .elementlist .inner > .textfragment h2 {
letter-spacing: -1.5px;
font-size: 56px;
}
}
#contact > .elementlist .inner > .textfragment h2 span {
letter-spacing: .48px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 16px;
font-size: 12px;
font-weight: 700;
display: block;
}
@media (width > 992px) {
#contact > .elementlist .inner > .textfragment h2 span {
letter-spacing: .56px;
font-size: 14px;
}
}
#contact > .elementlist .inner > .textfragment .teaser-text .richtext p {
color: var(--color-text-secondary);
margin: 0;
font-size: 16px;
line-height: 1.4;
}
@media (width > 992px) {
#contact > .elementlist .inner > .textfragment .teaser-text .richtext p {
font-size: 18px;
line-height: 1.5;
}
}
#contact > .elementlist .inner > .elementlist {
gap: var(--gap-section-mobile);
flex-direction: column;
display: flex;
margin-top: unset !important;
}
@media (width > 992px) {
#contact > .elementlist .inner > .elementlist {
display: contents;
}
#contact > .elementlist .inner > .elementlist > div:first-child {
grid-area: 2 / 1;
align-self: start;
}
}
#contact > .elementlist .inner > .elementlist > div:first-child .image-wrapper {
width: 100%;
overflow: hidden;
}
#contact > .elementlist .inner > .elementlist > div:first-child .image-wrapper img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
#contact > .elementlist .inner > .elementlist > div:first-child .teaser-text .richtext {
flex-direction: column;
gap: 12px;
margin-top: 12px;
display: flex;
}
#contact > .elementlist .inner > .elementlist > div:first-child .teaser-text .richtext h3 {
letter-spacing: -.2px;
color: var(--color-text);
margin: 0;
font-size: 20px;
font-weight: 600;
line-height: 1.3;
}
#contact > .elementlist .inner > .elementlist > div:first-child .teaser-text .richtext p {
color: var(--color-text-secondary);
margin: unset;
margin-top: 1rem;
}
#contact > .elementlist .inner > .elementlist > div:first-child .teaser-text .richtext p a[href^="https://www.linkedin.com"] {
color: var(--color-primary);
background: none;
border: none;
align-items: center;
gap: 8px;
padding: 0;
font-size: 13px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
#contact > .elementlist .inner > .elementlist > div:first-child .teaser-text .richtext p a[href^="https://www.linkedin.com"]:before {
content: "";
border-radius: var(--radius-icon);
background-color: var(--color-linkedin);
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M100.28 448H7.4V148.9h92.88zm-46.44-341C24.09 107 0 82.72 0 53.44a53.44 53.44 0 01106.88 0c0 29.28-24.13 53.56-53.04 53.56zM447.9 448h-92.68V302.4c0-34.7-.7-79.34-48.4-79.34-48.4 0-55.8 37.8-55.8 76.84V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 10px 10px;
flex-shrink: 0;
width: 18px;
height: 18px;
}
@media (width > 992px) {
#contact > .elementlist .inner > .elementlist > div:nth-child(2) {
grid-area: 1 / 2 / span 2;
}
}
#contact > .elementlist .inner #contactForm {
background: var(--color-white);
border-radius: var(--radius-card-mobile);
box-shadow: var(--shadow-card);
flex-direction: column;
gap: 20px;
padding: 20px;
display: flex;
}
@media (width > 992px) {
#contact > .elementlist .inner #contactForm {
border-radius: var(--radius-card-desktop);
width: 100%;
max-width: 704px;
margin-left: auto;
padding: 40px;
}
}
#contact > .elementlist .inner #contactForm .textfragment .teaser-text .richtext p {
letter-spacing: .36px;
color: var(--color-text);
margin: 0;
font-size: 18px;
}
#contact > .elementlist .inner #contactForm form .form-fields {
flex-direction: column;
gap: 16px;
display: flex;
}
@media (width > 992px) {
#contact > .elementlist .inner #contactForm form .form-fields {
grid-template-columns: 1fr 1fr;
gap: 16px;
display: grid;
}
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element {
flex-direction: column;
gap: 6px;
width: 100%;
margin: 0;
display: flex;
}
@media (width > 992px) {
#contact > .elementlist .inner #contactForm form .form-fields .form-element {
grid-column: 1 / -1;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element.single-col:first-of-type {
grid-column: 1;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element.single-col:nth-of-type(2) {
grid-column: 2;
}
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element label {
color: var(--color-text-secondary);
font-size: 13px;
font-weight: 500;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-input, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-area, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-select {
width: 100%;
color: var(--color-text-secondary);
background-color: var(--color-input-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
padding: 0 16px;
font-size: 14px;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-input::placeholder, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-area::placeholder, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-select::placeholder {
color: var(--color-text-secondary);
opacity: .6;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-input:focus, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-area:focus, #contact > .elementlist .inner #contactForm form .form-fields .form-element .form-select:focus {
border-color: var(--color-primary);
outline: none;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-input {
height: 44px;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-area {
height: 10rempx;
padding: 12px 16px;
}
#contact > .elementlist .inner #contactForm form .form-fields .form-element .form-select {
min-height: 44px;
}
#contact > .elementlist .inner #contactForm form .form-consent {
margin-block: var(--gap-med);
}
#contact > .elementlist .inner #contactForm form .form-consent h6, #contact > .elementlist .inner #contactForm form .form-consent small {
color: var(--color-text-secondary);
font-size: 1.3rem;
display: inline-block;
}
#contact > .elementlist .inner #contactForm form .form-row {
margin: unset !important;
}
@media (width <= 992px) {
#contact > .elementlist .inner #contactForm form > div:last-of-type {
display: block;
}
#contact > .elementlist .inner #contactForm form > div:last-of-type .form-group {
display: block;
margin: unset !important;
}
#contact > .elementlist .inner #contactForm form > div:last-of-type .form-group input[type="submit"] {
width: 100%;
display: block;
margin: unset !important;
}
}
#contact > .elementlist .inner #contactForm form > div:last-of-type input[type="reset"] {
display: none;
}
#contact .custom-select.is-invalid, #contact .form-control.is-invalid, #contact .was-validated .custom-select:invalid, #contact .was-validated .form-control:invalid {
border-color: #d94c4c !important;
}
/*# sourceMappingURL=TEG_Frontend.325f2043.css.map */