:root { --font-family: "Inter", sans-serif; --font-family-heading: "Hanken Grotesk", sans-serif; --color-primary-rgb: 18,33,40; --error: #a63b3b;  --page-width: 2048px; --header-height: 107px; --header-height-mobile: 43px; --gap: 1rem; --slider-arrow-size: 2.5rem; --border-width: 2px; --shift-size: 8rem; --section-padding: 5rem; --transition-duration: 0.5s; --transition: ease var(--transition-duration); } @media (max-width: 991px) { :root { --header-height: var(--header-height-mobile); } } @media (max-width: 767px) { :root { --section-padding: 3rem; } }  @media (max-width: 600px) { body.bricks-is-frontend.admin-bar #brx-header.sticky.scrolling { top: 0; } }  html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); } html, body { font-family: var(--font-family); font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--font-color); } body { background-color: var(--white); } body, main { overflow-x: clip; } ::selection { background-color: var(--color-secondary); color: var(--white); } .hidden { display: none !important; opacity: 0; visibility: hidden; } body.bricks-is-frontend :focus-visible { outline: 2px solid var(--color-secondary); } * { scrollbar-color: var(--color-secondary) var(--color-primary); scrollbar-width: thin; }  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 0.5em; font-family: var(--font-family-heading); font-weight: 600; line-height: normal; text-transform: uppercase; text-wrap: balance; letter-spacing: normal; } h1, .h1 { font-size: 3rem; font-weight: 700; } h2, .h2 { font-size: 2.5rem; } h3, .h3 { font-size: 2rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1.1rem; } h1, .h1, h2, .h2 { letter-spacing: 0.05em; } @media (max-width: 991px) { h1, .h1 { font-size: 2.5rem; } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.5rem; } h4, .h4 { font-size: 1.25rem; } h5, .h5 { font-size: 1.15rem; } h6, .h6 { font-size: 1.05rem; } } @media (max-width: 767px) { h1, .h1 { font-size: 1.55rem; } h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; } h4, .h4 { font-size: 1.185rem; } } .brxe-text + :where(h2, h3, h4, h5, h6), p + :where(h2, h3, h4, h5, h6) { margin-top: 1em; } p { margin-bottom: 1.75em; } p:last-of-type { margin-bottom: 0; } b, strong { font-weight: 600; } a { transition: var(--transition); } .brxe-text a:not(.bricks-button), .brxe-text-basic a:not(.bricks-button) { text-decoration: underline; color: var(--color-primary); } :where(.bg--color-primary, footer) .brxe-text a:not(.bricks-button), :where(.bg--color-primary, footer) .brxe-text-basic a:not(.bricks-button) { color: inherit; } .brxe-text a:not(.bricks-button), .brxe-text-basic a:not(.bricks-button), a.brxe-text-link .text, a.brxe-text-link .icon { transition: var(--transition); } a.brxe-text-link .icon path { fill: currentColor; } .brxe-text a:not(.bricks-button):is(:hover, :focus), a.brxe-text-link:is(:hover, :focus) :where(.icon, .text) { color: var(--color-secondary); } :where(.brxe-text, .teaser, .brxe-div) :where(ul, ol) { margin: 1em 0; padding-left: 1.5em; } :where(.brxe-text, .teaser, .brxe-div) :where(ol, ul) li:not(:last-child) { margin-bottom: 0.5em; } :where(.brxe-text, .teaser, .brxe-div) :where(ol, ul):only-child { margin: 0; } :where(.brxe-text, .teaser, .brxe-div) :where(ol, ul):last-child { margin-bottom: 0; } ul ::marker { color: var(--color-secondary); } :where(ol, ul).list-reset { margin: 0; padding-left: 0; list-style: none; } .dsgvo-reference { font-size: 0.8rem; }  main > section { position: relative; } section { padding: var(--section-padding) 1rem; } section section { padding: 0; } section.section--shifted { margin-bottom: calc(var(--shift-size) * -1); padding-top: 0; padding-bottom: 0; z-index: 5; } section.section--shifted + section { padding-top: calc(var(--section-padding) * 2 + var(--shift-size)); } header + main, header + .hero { margin-top: var(--header-height); }  header { height: var(--header-height); padding: 2rem 1rem; background-color: var(--color-primary); color: var(--white);  content-visibility: visible !important; } @media (max-width: 991px) { header { padding: 0.5rem 1rem; } }  @layer bricks { .brxe-nav-menu .bricks-mobile-menu { overflow-y: auto; } } div.brxe-nav-menu .bricks-nav-menu a, div.brxe-nav-menu .bricks-mobile-menu-wrapper li a, div.brxe-nav-menu .bricks-nav-menu .sub-menu a { color: inherit; line-height: normal; } div.brxe-nav-menu .bricks-nav-menu a:is(:hover, :focus), div.brxe-nav-menu .bricks-mobile-menu-wrapper a:is(:hover, :focus) { color: var(--color-secondary); } .main-menu.brxe-nav-menu .bricks-nav-menu { align-items: center; } .main-menu .brx-submenu-toggle svg { color: var(--color-secondary); } .main-menu .bricks-mobile-menu-wrapper .brx-submenu-toggle button[aria-expanded="true"] svg { transform: rotate(-180deg); } div.brxe-nav-menu li.menu-item--highlighted a { padding: 0.25em 1em; background-color: var(--white); font-weight: 600; color: var(--color-primary); } div.brxe-nav-menu li.menu-item--highlighted a:is(:hover, :focus), div.brxe-nav-menu li.menu-item--highlighted a[aria-current="page"] { background-color: var(--color-secondary); color: var(--white); }  .main-menu .bricks-nav-menu-wrapper .sub-menu { top: calc(100% + 1rem); background-color: var(--color-primary); } .main-menu .bricks-nav-menu-wrapper .sub-menu a { padding: 0.5em 0.75em; }  .bricks-mobile-menu { padding: 1.5rem 0; } .bricks-mobile-menu li { padding: 0.5rem 0; } div.brxe-nav-menu .bricks-mobile-menu li.menu-item--highlighted a { padding-top: 0.5rem; padding-bottom: 0.5rem; } .bricks-mobile-menu .sub-menu { padding-top: 0.5rem; }  .aria-current > a, a[aria-current="page"]:not(.bricks-button), div.brxe-nav-menu :where(.bricks-nav-menu, .bricks-mobile-menu) li a[aria-current="page"], div.brxe-nav-menu :where(.bricks-nav-menu, .bricks-mobile-menu) .current-menu-parent > div > a, div.brxe-nav-menu :where(.bricks-nav-menu, .bricks-mobile-menu) .sub-menu a[aria-current="page"] { color: var(--color-secondary); }  .bricks-button { padding: 0.65rem 1.25rem; border: 1px solid var(--color-primary); column-gap: 1.25em; background-color: var(--color-primary); font-size: 1rem; font-weight: 600; line-height: normal; color: var(--white); text-transform: uppercase; cursor: pointer; transition: var(--transition-duration); } .bricks-button svg { min-width: 20px!important; fill: currentColor; transition: var(--transition-duration); } .bricks-button.bricks-background-secondary { border-color: var(--color-secondary); background-color: var(--color-secondary); } .bricks-button:is(:hover, :focus), .bricks-button.bricks-background-light:is(:hover, :focus) { background-color: transparent; color: var(--color-primary); } .bricks-button.bricks-background-secondary:is(:hover, :focus) { color: var(--color-secondary); } :where(.brxe-text, .brxe-text-basic, ul, ol) + :where(.bricks-button, .buttons-wrapper) { margin-top: 2.5rem; }   .banner, .teaser { border-image: linear-gradient(rgba(var(--color-primary-rgb),0.5) 101%, transparent) 0 fill; } .hero, .slider-section, .teaser--fullwidth:nth-child(even) { border-image: linear-gradient(to right, rgba(var(--color-primary-rgb),0.6) 40%, transparent 90%) 0 fill; } .teaser--fullwidth:nth-child(odd) { border-image: linear-gradient(to left, rgba(var(--color-primary-rgb),0.6) 40%, transparent 90%) 0 fill; }  .small-headline { display: block; margin-bottom: 1em; font-size: 0.9rem; font-weight: 600; line-height: 1; color: var(--color-secondary); text-transform: uppercase; } .small-headline:before { content: ""; display: inline-block; width: 1.25em; height: 1px; margin-right: 0.75em; background-color: var(--color-secondary); vertical-align: center; } .small-headline--foot { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; width: 100%; margin: 1em 0 0; text-align: right; } .small-headline--foot:before { flex-basis: 100%; flex-grow: 2; }  .banner li::marker { color: inherit; }  .teaser .bricks-button { justify-content: space-between; text-align: left; } .teaser .bricks-button h3 { margin-bottom: 0; font-size: 1rem; } .teaser .bricks-button svg { fill: var(--color-secondary); } .teaser .bricks-button:is(:hover, :focus) { border-color: var(--color-secondary); background-color: var(--color-secondary); } .teaser .bricks-button:is(:hover, :focus) svg { fill: var(--color-primary); }  .teaser--fullwidth:nth-child(even) .brxe-container { align-items: flex-start; } .teaser--fullwidth:nth-child(odd) .brxe-container { align-items: flex-end; }  .split { --gap: 2rem; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: var(--gap); } .split--reversed { flex-direction: row-reverse; } .split--50-50 .split__img-wrapper, .split--50-50 .split__content { width: calc(50% - var(--gap) / 2); } .split--60-40 .split__img-wrapper { width: calc(40% - var(--gap) / 2); } .split--60-40 .split__content { width: calc(60% - var(--gap) / 2); } .split--70-30 .split__img-wrapper { width: calc(30% - var(--gap) / 2); } .split--70-30 .split__content { width: calc(70% - var(--gap) / 2); } .split .split__img-wrapper:not(.split__img-wrapper--textonly) { max-height: 25rem; } .split__img { width: 100%; height: 100%; max-height: inherit; object-fit: cover; object-position: center center; } @media (max-width: 767px) { .split .split__img-wrapper, .split .split__content { width: 100%; } .split .split__img-wrapper { max-width: 45rem; max-height: 25rem; } }  .icon--text { flex-direction: column; }  a.box:is(:hover, :focus) { color: var(--color-secondary); }  .job-listing:has(:focus-within) { outline: 2px solid var(--color-secondary); } .job-listing summary:focus { outline: none!important; } .job-listing__title.box__headline.brxe-heading { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: baseline; column-gap: var(--gap); row-gap: 0.5rem; } .job-listing__title span { font-size: 1rem; font-weight: 600; text-transform: none; } .job-listing summary { list-style: none; cursor: pointer; } .job-listing .job-listing__block:not(:first-child) { margin-top: 1.25rem; }  ul.mab-gallery-filters .mab-gallery-filter { padding: 0.5em 1em; background-color: var(--white); line-height: 1; color: var(--color-primary); } ul.mab-gallery-filters .mab-gallery-filter:is(:hover, :focus), ul.mab-gallery-filters .mab-gallery-filter.active { background-color: var(--color-secondary); color: var(--white); } ul.mab-gallery-filters .mab-gallery-filter:is(:hover, :focus):after, ul.mab-gallery-filters .mab-gallery-filter.active:after { display: none; } .mab-image-gallery li { background-color: var(--color-primary); transition: var(--transition); } .mab-image-gallery:has(li:is(:hover, :focus-within)) li:not(:hover, :focus-within) a { opacity: 0.3; } .reference-gallery.brxe-max-image-gallery .image { width: 100%; }  .catalogue-wrapper:not(:first-child) { margin-top: 4rem; }  .form-wrapper { --_form-padding: 0.5rem; } .brxe-form input:not([type="radio"], [type="checkbox"]), .brxe-form select, .brxe-form textarea { padding: 0.5rem 1rem; border: 1px solid var(--color-primary); background-color: var(--white); line-height: normal; } .brxe-form textarea { min-height: 8rem; max-height: 25rem; resize: vertical; } .brxe-form input:focus, .brxe-form select:focus, .brxe-form textarea:focus, .contact-form .options-wrapper li input[type="checkbox"]:focus { border-color: var(--color-secondary); }  .brxe-form select, .brxe-form select option, .variations_form select, .variations_form select option { font-family: var(--font-family); } .brxe-form .submit-button-wrapper { display: block; width: 100%; padding: 0 var(--_form-padding); }  .contact-form .options-wrapper li { display: flex; flex-flow: row nowrap; align-items: baseline; column-gap: 0.5rem; } .contact-form .options-wrapper li input[type="checkbox"] { width: 1rem; min-width: 1rem; height: 1rem; padding: 0; border: 1px solid var(--font-color); box-shadow: none; background-color: var(--white); appearance: none; transition: var(--transition); } .contact-form .options-wrapper li input[type="checkbox"]:checked { box-shadow: 0 0 0 1rem var(--color-primary) inset; } .contact-form .options-wrapper li label { max-width: 73ch; font-size: 0.8rem; } .contact-form .options-wrapper li label strong { display: block; margin-bottom: 0.25em; font-size: 1rem; }  footer { padding: 4rem 1rem; background-color: var(--color-primary); font-size: 0.8rem; color: var(--white); } footer hr { width: 100%; max-width: 15rem; }