:root { --blue: #1b2543; --blue-transparent: rgba(27, 37, 67, 0.85); --orange: #e47e07; --black: #262626; --white: #ffffff; --gray: #e7e7e7; --gray-form: #d9d9d9; --error: #a63b3b; --header-desktop: 106px; --header-mobile: 55px; } html, body { overflow-x: hidden; font-family: "Montserrat"; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--black); } body { background-color: var(--white); } ::selection { background-color: var(--orange); color: var(--white); } .brxe-container.container-wide { width: 1300px; } .brxe-container.container-narrow { width: 800px; } .hidden { display: none; opacity: 0; visibility: hidden; } svg { width: 100%; height: 100%; } main { padding-top: var(--header-desktop); } @media (max-width: 991px) { main { padding-top: var(--header-mobile); } }  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1em; font-family: "Radio Canada Big"; font-weight: 600; line-height: normal; color: var(--blue); text-transform: uppercase; text-wrap: balance; } h1, .h1 { margin-bottom: 0.1em; font-size: 3.75rem; } h2, .h2 { font-size: 2.375rem; } h3, .h3 { font-size: 1.875rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.3rem; } h6, .h6 { font-size: 1.25rem; } @media (max-width: 991px) { h1, .h1 { font-size: 2.15rem; } h2, .h2 { font-size: 1.875rem; } h3, .h3 { font-size: 1.5rem; } h4, .h4 { font-size: 1.3rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1.15rem; } } .brxe-text + :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: 700; } .brxe-text a, a.brxe-text-link, a.brxe-text-link :where(.text, path) { color: var(--blue); text-decoration: underline; transition: 0.3s; } .brxe-text a:is(:hover, :focus, :active), a.brxe-text-link:is(:hover, :focus, :active), a.brxe-text-link:is(:hover, :focus, :active) .text { color: var(--orange); } a.brxe-text-link:is(:hover, :focus, :active) path { fill: var(--orange); } .brxe-text ul { margin: 1.5em 0; padding-left: 0; text-align: left; list-style: none; } .brxe-text ul li { position: relative; padding-left: 1.75rem; } .brxe-text ul li::before { content: url("/app/uploads/arrow.svg"); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .brxe-text ul li:not(:last-child) { margin-bottom: 1rem; } .dsgvo-reference { font-size: 0.8rem; }  section { padding: 6.25rem 3.75rem 7.5rem; } @media (max-width: 991px) { section { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 767px) { section { padding: 4.5rem 1rem 6rem; } } @media (max-width: 478px) { section { padding: 1.875rem 1rem 2.5rem; } }  header { position: relative; height: var(--header-desktop); padding: 0 15px; background-color: var(--blue); color: var(--white); line-height: 1; transition: 0.3s !important; } header.scrolling { box-shadow: 0 -2px 10px 0 rgba(255, 255, 255, 0.5); } @media (max-width: 991px) { header { height: var(--header-mobile); } }  #menu-main-menu { flex-wrap: wrap; } #menu-main-menu .sub-menu { padding-top: 1rem; padding-bottom: 1rem; } header .bricks-nav-menu a, header .bricks-mobile-menu a { position: relative; padding-bottom: 2px; font-weight: 700; } header .brxe-nav-menu ul.bricks-nav-menu { align-items: center; } li.menu-item-has-children [aria-expanded] .menu-item-icon { height: 1em; }  .bricks-mobile-menu { padding-top: 5rem; } .bricks-mobile-menu li { padding: 0.5rem 0; } .brxe-nav-menu .bricks-mobile-menu li a { display: inline-block; width: auto; } .brxe-nav-menu ul.bricks-mobile-menu li a, .brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu li { line-height: normal; } .bricks-mobile-menu li.open .brx-submenu-toggle button { transform: rotate(180deg); } .brxe-nav-menu ul.bricks-mobile-menu .sub-menu { display: block; max-height: 0; background-color: var(--white) !important; overflow: hidden; color: var(--blue); transition: 0.3s; } .brxe-nav-menu ul.bricks-mobile-menu li.open .sub-menu { max-height: 100vh; margin-top: 0.5rem; padding: 0.5rem 0; } .bricks-mobile-menu .sub-menu a:not([aria-current="page"]) { color: inherit; }  .bricks-nav-menu a:is(:hover, :focus, :active), .bricks-nav-menu .sub-menu a:is(:hover, :focus, :active), .bricks-mobile-menu a:is(:hover, :focus, :active), .bricks-mobile-menu .sub-menu a:is(:hover, :focus, :active), .current-menu-parent a, a[aria-current="page"], :where(.brxe-nav-menu) .bricks-nav-menu .sub-menu a[aria-current="page"] { color: var(--orange); }  .bricks-button { position: relative; display: inline-block; padding: 10px 17px; border: none; background-color: var(--orange); overflow: hidden; color: var(--white); line-height: normal; cursor: pointer; transition: 0.3s; } .bricks-button.bricks-background-secondary, .bricks-button.bricks-background-primary:is(:hover, :focus, :active) { background-color: var(--blue); } .bricks-button.bricks-background-secondary:is(:hover, :focus, :active), .bricks-button.button-effect:is(:hover, :focus, :active) { background-color: var(--orange); } .bricks-button span { position: relative; z-index: 5; } .button-effect:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 200%; background-image: linear-gradient( to right, var(--orange) 0%, rgba(0, 0, 0, 0.3) 50%, var(--orange) 100% ); transition: 0.3s; } .bricks-button:is(:hover, :focus, :active):before { left: -100%; }  .intro-headline:after { content: ""; position: absolute; bottom: 0; left: 0; width: 70%; max-width: 530px; height: 10px; background-color: var(--orange); } @media (min-width: 992px) { .intro-headline:after { width: 530px; } } .section-blue :where(h2, h3, h4, h5, h6), .teaser :where(h2, h3, h4, h5, h6), .tile :where(h2, h3, h4, h5, h6), .tile-service :where(h2, h3, h4, h5, h6) { color: var(--gray); } .section-steel { position: relative; } .section-steel:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background-image: url("/app/uploads/steel-square.webp"); background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: 0; } @media (max-width: 767px) { .section-steel:before { top: auto; bottom: 0; width: 100%; height: 300px; } }  .tile:is(:hover, :focus, :active) .tile--content { background-image: linear-gradient(var(--orange) 10%, transparent); } .tile-service h4 { margin-bottom: 0; } :where(.tile-service, .tile-small) .brxe-button { background-color: var(--gray); color: var(--blue); } :where(.tile-service, .tile-small) .brxe-button:is(:hover, :focus, :active) { background-color: var(--orange); color: var(--white); } :where(.teaser, .section-blue) a.brxe-text-link :where(.text, path) { color: var(--white); fill: var(--white); text-decoration: none; transition: 0.3s; } :where(.teaser, .section-blue) a.brxe-text-link:is(:hover, :focus, :active) :where(.text, path) { color: var(--orange); fill: var(--orange); }  figure.captioned-img { padding-bottom: 2rem; } .captioned-img figcaption { display: none; padding: 0; background: none; color: var(--black); } .captioned-img:is(:hover, :focus) figcaption { display: block; } @media (max-width: 767px) { .captioned-img figcaption { display: block; } }  .box td { vertical-align: bottom; }  .brxe-image.partner--img img { transition: 0.2s; } .brxe-image.partner--img:is(:hover, :focus) img { scale: 1.1; }  .brxe-form input, .brxe-form textarea { padding: 0.5rem 1rem; border: 1px solid var(--gray-form); border-radius: 8px; color: var(--black); line-height: normal; } .brxe-form textarea { min-height: 4rem; max-height: 8rem; resize: vertical; } .brxe-form input:empty, .brxe-form textarea:empty { border-color: var(--gray-form); } .brxe-form input:user-valid, .brxe-form textarea:user-valid { border-color: var(--blue); } .brxe-form input:user-invalid, .brxe-form textarea:user-invalid { border-color: var(--error); } .brxe-form .submit-button-wrapper { display: block; width: 100%; padding: 0 0.5rem; } .brxe-form button { padding: 1rem 2.75rem; border-radius: 5px; font-weight: 700; }  footer { padding: 70px 15px 45px; background-color: var(--black); color: var(--white); } #menu-footer-menu { display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; } #menu-footer-menu li { padding-right: 1rem; } #menu-footer-menu a { display: inline-block; width: auto; } footer a.brxe-text-link { color: var(--white); } footer a:is(:hover, :focus, :active), footer a[aria-current="page"] { color: var(--orange); } @media (max-width: 767px) { #menu-footer-menu li { padding-bottom: 0.5rem; } } @media (max-width: 491px) { #menu-footer-menu { grid-template-columns: 1fr; } #menu-footer-menu li { padding-right: 0; } }