:root { --blue: var(--bricks-color-kirmbk); --orange: var(--bricks-color-htdlbq); --white: var(--bricks-color-qnrevo); --neutral: var(--bricks-color-enlwrl); --blue-rgb: 0,5,23; --red: #aa3c44; --error: var(--red);  --page-width: 2048px; --header-height: 101px; --header-height-mobile: 69px; --gap: 1rem; --border-radius: 0.5rem; --transition-duration: 0.25s; --transition: ease var(--transition-duration); } @media (max-width: 991px) { :root { --header-height: var(--header-height-mobile); } }  @media (max-width: 600px) { body.bricks-is-frontend.admin-bar #brx-header.sticky.scrolling { top: 0; } }  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 0.5rem); } html, body { font-family: "Outfit"; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--white); } body { overflow-x: clip; } ::selection { background-color: var(--orange); color: var(--white); } .hidden, [hidden] { display: none !important; opacity: 0; visibility: hidden; outline: none; } svg { width: 100%; height: 100%; } a, svg path, .section-title { transition: var(--transition); } body.bricks-is-frontend :focus-visible { outline: 2px dashed var(--orange); }  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: "Outfit"; margin-bottom: 2rem; font-weight: 600; line-height: normal; text-wrap: balance; } h1, .h1 { font-size: 4rem; } h2, .h2 { font-size: 2.273rem; } h3, .h3 { font-size: 2.045rem; } h4, .h4 { font-size: 1.591rem; } h5, .h5 { font-size: 1.136rem; } h6, .h6 { font-size: 1.05rem; } .bricks-type-lead span { display: block; font-size: 2.1em; line-height: 1.2; text-transform: uppercase; } @media (max-width: 991px) { h1, .h1 { font-size: 2.273rem; } h2, .h2 { font-size: 2.045rem; } h3, .h3 { font-size: 1.591rem; } h4, .h4 { font-size: 1.2rem; } h5, .h5 { font-size: 1.1rem; } h6, .h6 { font-size: 1.05rem; } } @media (max-width: 767px) { h1, .h1 { font-size: 2rem; } h2, .h2 { font-size: 1.75rem; } } .dsgvo-reference { font-size: 0.8rem; } strong, b { font-weight: 600; }  section section { padding: 0; } .visually-hidden { position: absolute; top: -9999rem; left: -9999rem; width: 1px; height: 1px; border: 0; outline: none; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); } :where(.brxe-text, p, table) + :where(h2, h3, h4, h5, h6) { margin-top: 1em; } p { margin-bottom: 1em; } p:last-of-type { margin-bottom: 0; } .brxe-text a:not(.bricks-button) { text-decoration: underline; } .brxe-text a:not(.bricks-button), a.brxe-text-link .text { color: inherit; 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(--orange); } .brxe-text :where(ul, ol) { margin: 1.5em 0; padding-left: 1.75em; } .brxe-text :where(ul, ol):only-child { margin: 0; } .brxe-text ul { list-style: none; } .brxe-text :where(ol, ul) li:not(:last-child) { margin-bottom: 0.5em; } .brxe-text ul li { position: relative; } .brxe-text ul li:before { content: "•"; position: absolute; top: 0; left: -1em; } :where(.brxe-text, .brxe-text-basic) + .bricks-button { margin-top: 2rem; } .font--orange { color: var(--orange); } body.privacy-policy img { background-color: var(--white); }  header { --_header-border: 1px solid rgba(250, 250, 250, 0.2);  padding: 2rem 1rem; border-bottom: var(--_header-border); font-size: 1.136rem; color: var(--white);  content-visibility: visible !important; } header.scrolling { padding-top: 1rem; padding-bottom: 1rem; background-color: rgba(var(--blue-rgb),0.5); } header, nav.bricks-mobile-menu-wrapper:before { -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); } header .bricks-link-wrapper { line-height: 1; } header .invadox-logo path { transition: var(--transition); }  @keyframes logo-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes logo-fade-in { from { opacity: 0; } to { opacity: 1; } }  header .logo-name path { opacity: 0; animation: logo-fade-in 0.25s forwards; } header .logo-name path:nth-child(2) { animation-delay: 0.1s; } header .logo-name path:nth-child(3) { animation-delay: 0.15s; } header .logo-name path:nth-child(4) { animation-delay: 0.2s; } header .logo-name path:nth-child(5) { animation-delay: 0.25s; } header .logo-name path:nth-child(6) { animation-delay: 0.3s; } header .logo-name path:nth-child(7) { animation-delay: 0.35s; }  header.scrolling .logo-name path { opacity: 1; animation: logo-fade-out 0.5s forwards; } header.scrolling .logo-name path:nth-child(6) { animation-delay: 0.1s; } header.scrolling .logo-name path:nth-child(5) { animation-delay: 0.15s; } header.scrolling .logo-name path:nth-child(4) { animation-delay: 0.2s; } header.scrolling .logo-name path:nth-child(3) { animation-delay: 0.25s; } header.scrolling .logo-name path:nth-child(2) { animation-delay: 0.3s; } header.scrolling .logo-name path:nth-child(1) { animation-delay: 0.35s; }  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; transition: var(--transition) !important; }header .brxe-nav-menu { text-transform: uppercase; } .brxe-nav-menu .bricks-nav-menu a:is(:hover, :focus), .brxe-nav-menu .bricks-mobile-menu-wrapper li a:is(:hover, :focus), .brxe-nav-menu .bricks-nav-menu .sub-menu a:is(:hover, :focus) { color: var(--orange); } header .bricks-nav-menu > li > a { padding: 0.4em 0.65em; } header .brxe-nav-menu a[href$="/kontakt/"] { outline: 2px dashed var(--white); } header .brxe-nav-menu .bricks-mobile-menu a[href$="/kontakt/"] { padding-top: 0.5em; padding-bottom: 0.5em; } header .bricks-nav-menu a:is(:hover, :focus) { outline-color: var(--orange); }  :where(header, footer) .brx-submenu-toggle.icon-right button { width: 1rem; }  nav.bricks-mobile-menu-wrapper:before { border-left: var(--_header-border); background-color: rgba(var(--blue-rgb),0.8); } .bricks-mobile-menu { padding: 3rem 1rem 1rem; } .bricks-mobile-menu li { padding: 0.75rem 1rem; }  .aria-current > a, a[aria-current="page"]:not(.bricks-button), div.brxe-nav-menu .bricks-nav-menu a[aria-current="page"], div.brxe-nav-menu .bricks-nav-menu .current-menu-parent > div > a, div.brxe-nav-menu .bricks-nav-menu .sub-menu a[aria-current="page"] { color: var(--orange); outline-color: var(--orange); }  footer #menu-footer-service li:not(:first-child) { margin-left: 1em; padding-left: 1em; border-left: 1px solid var(--white); } @media (max-width: 478px) { footer #menu-footer-service { flex-wrap: wrap; } }  .bricks-button, .website-request-form-wrapper .piotnetforms-button { padding: 0.5rem 1.4rem; border: 1px solid var(--orange); border-radius: var(--border-radius); background-color: var(--orange); font-size: 1.25rem; font-weight: 600; line-height: normal; color: var(--white); text-wrap: balance; cursor: pointer; transition: var(--transition-duration); } .bricks-button svg { width: 1em; transition: 0.05s; } .bricks-button path { fill: currentColor; } .bricks-button.bricks-background-secondary { border-color: var(--white); background-color: transparent; } .bricks-button.bricks-background-secondary svg { color: var(--orange); } .bricks-button:is(:hover, :focus), .website-request-form-wrapper .piotnetforms-button:is(:hover, :focus) { border-color: var(--white); background-color: transparent; } .bricks-button:is(:hover, :focus), .website-request-form-wrapper .piotnetforms-button:is(:hover, :focus), section:is(:hover, :focus-within) .section-title, .hero--scroller__skip-btn:is(:hover, :focus) { box-shadow: 0 0 2em 0.25em var(--neutral); } .hero--scroller__skip-btn:is(:hover, :focus) path { fill: var(--orange); } .bricks-button:is(:hover, :focus) svg { color: var(--orange); transform: scale(1.1); } .bricks-button.bricks-background-secondary:is(:hover, :focus) { background-color: var(--orange); border-color: var(--orange); } .bricks-button.bricks-background-secondary:is(:hover, :focus) svg { color: var(--blue); } @media (max-width: 767px) { .bricks-button { font-size: 1.1rem; } }  .back-btn svg { transform: rotate(-90deg); }   .hero--scroller .hero--scroller__slide:not(:last-child) .h1 { margin-bottom: 0; } .hero--scroller .galaxy-container, .hero--scroller .galaxy-container canvas { height: 100%!important; } .hero--scroller .galaxy-container canvas { width: auto!important; } .hero:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 20rem; background: linear-gradient(to top, var(--blue), transparent); z-index: 1; } .hero--scroller__wrapper.brxe-block { overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; } .hero--scroller__slide.brxe-div { scroll-snap-align: start; scroll-snap-stop: always; }  .project-img:is(:hover, :focus) { position: relative !important; transform: scale(1.05); z-index: 5; }  .number { border-right: 1px solid var(--white); } .number:last-child { border-right-color: transparent; } @media (max-width: 767px) { .number:nth-child(even) { border-right-color: transparent; } }  .process-wrapper { counter-reset: process; } .teaser--process { counter-increment: process; } .slide--leistungen:before, .teaser--process:before { display: block; font-size: 1.5em; opacity: 0.8; } .teaser--process:before { content: counters(process, "", decimal-leading-zero); margin-bottom: 1rem; }  .slider--leistungen .splide__track { padding: 1px 5%!important; cursor: grab; } .slider--leistungen .splide__track:active { cursor: grabbing; } .slider--leistungen .splide__list { counter-reset: leistung; } .slide--leistungen { position: relative; width: calc(33.33% - var(--gap) / 1.5) !important; min-width: 29rem; counter-increment: leistung; } .slide--leistungen:before { content: counters(leistung, "", decimal-leading-zero); position: absolute; top: 2rem; right: 2rem; } .slider--leistungen .fact span { color: var(--orange); } .slider--leistungen .fact span:after { content: url("/wp-content/uploads/up-arrow-orange.svg"); margin-left: 0.25em; } .slider--leistungen .splide__pagination { flex-wrap: nowrap; padding: 1px; border: 1px solid var(--white); border-radius: 2rem; } .slider--leistungen .splide__pagination__page { width: 1.5rem; height: 0.5rem; border-radius: 1rem; } .slide--past-projects { width: calc(25% - var(--gap) / 1.5) !important; min-width: 12rem; } @media (max-width: 767px) { .slider--leistungen .splide__track { padding: 1px 0.5rem!important; } .slide--leistungen, .slide--past-projects { width: calc(50% - var(--gap) / 2) !important; min-width: 20rem; } } @media (max-width: 478px) { .slide--leistungen, .slide--past-projects { width: 100% !important; min-width: unset; } } .teaser--process { --_line-height: 6.5rem; }  .teaser--process:nth-child(odd) { margin-bottom: 13rem; } .teaser--process:nth-child(even) { align-self: flex-end; } .teaser--process .brxe-heading { margin-bottom: 0.75rem; } .teaser--process:not(:last-child):after { content: ""; display: block; position: absolute; left: 50%; width: calc(50% + var(--gap)); height: var(--_line-height); border: 2px dashed var(--orange); } .teaser--process:nth-child(odd):after { top: 100%; border-top: none; border-right: none; } .teaser--process:nth-child(even):after { bottom: 100%; border-bottom: none; border-right: none; } @media (max-width: 991px) { .teaser--process:nth-child(even):after { top: 100%; bottom: auto; left: auto; right: 50%; border-top: none; border-left: none; border-right: 2px dashed var(--orange); border-bottom: 2px dashed var(--orange); } } @media (max-width: 478px) { .teaser--process { --_line-height: 3rem; } .teaser--process:nth-child(odd), .teaser--process:nth-child(even) { margin-bottom: var(--_line-height); } .teaser--process:nth-child(odd):after, .teaser--process:nth-child(even):after { width: 2px; height: var(--_line-height); border-bottom: none; } }  .florian-img { position: relative; cursor: help; } .florian-img:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--border-radius); background-image: url("/wp-content/uploads/florian_erol_you-hovered-me.webp"); background-repeat: no-repeat; background-size: cover; background-position: 60% 35%; opacity: 0; transition: var(--transition); } .florian-img:is(:hover, :focus):after { opacity: 1; z-index: 2; }  .brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form { --_form-padding: 0.5rem; --_radio-size: 1rem; } :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input, :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) select, :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) textarea { padding: 0.5rem 1rem; border: 1px solid var(--white); background-color: transparent; line-height: normal; } :where(.brxe-form, .website-request-form-wrapper) select { background-color: var(--blue); } :where(.brxe-form, .website-request-form-wrapper) select option:checked { background-color: var(--orange); }  select, select option { font-family: "Outfit", sans-serif; } .brxe-form .options-wrapper li:not(:first-child) { margin-top: 0.5rem; } :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input[type="radio"], :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input[type="checkbox"] { display: inline-block !important; top: 2px; width: var(--_radio-size); height: var(--_radio-size); margin-right: 0.25rem; padding: 0; opacity: 1 !important; appearance: none; } :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input[type="radio"] { border-radius: 50%; } :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input[type="radio"]:checked, :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) input[type="checkbox"]:checked { box-shadow: inset 0 0 0 var(--_radio-size) var(--orange); } :where(.brxe-form, .website-request-form-wrapper .piotnetforms-multi-step-form) textarea { min-height: 8rem; max-height: 25rem; resize: vertical; } .brxe-form .submit-button-wrapper { display: block; width: 100%; padding: 0 var(--_form-padding); }  .website-request-form-wrapper .website-request-nav[hidden="true"], .website-request-form-wrapper .form-tab { display: none; visibility: hidden; } .website-request-form-wrapper .form-tab[selected="yes"] { display: block; visibility: visible; } .website-request-form-wrapper .form-tab .brxe-heading { margin: 0.75em 0 1.5em; } .piotnetforms-multi-step-form__content p { margin: 1em 0; font-size: 1.1rem; font-weight: 600; } .website-request-form-wrapper .piotnetforms-field-subgroup.piotnetforms-subgroup-inline .piotnetforms-field-option { padding: 0 var(--_form-padding); } .website-request-form-wrapper #piotnetforms span.piotnetforms-field-option input { position: static !important; transform: none !important; } .website-request-form-wrapper #piotnetforms span.piotnetforms-field-option label::before { display: none !important; } .website-request-form-wrapper .form-tab #piotnetforms span.piotnetforms-field-option label { display: inline-block !important; padding-left: 0; } .website-request-form-wrapper .form-tab #piotnetforms span.piotnetforms-field-option label, .website-request-form-wrapper .piotnetforms-field-label { color: var(--white); } .website-request-form-wrapper [data-piotnetforms-image_select_min_select_check], .website-request-form-wrapper [data-piotnetforms-required] { margin-bottom: 0.5em; font-weight: 600; color: var(--error); }  .website-request-form-wrapper #piotnetforms .piotnetforms-multi-step-form__progressbar .piotnetforms-multi-step-form__progressbar-item-step { width: 3.5ch; border: 2px dashed var(--white); background-color: var(--blue) !important; font-size: 0.8rem; font-weight: 600; line-height: 2; color: var(--white) !important; } .website-request-form-wrapper #piotnetforms .active .piotnetforms-multi-step-form__progressbar-item-step { border-style: solid; border-color: var(--orange); color: var(--orange); } .website-request-form-wrapper #piotnetforms .piotnetforms-multi-step-form__progressbar-item.active .piotnetforms-multi-step-form__progressbar-item-step-number::after { border-bottom: 2px solid var(--orange); background-color: transparent !important; } .website-request-form-wrapper .piotnetforms-multi-step-form__progressbar-item-step-number::after { border-bottom: 2px dashed var(--white); background: none; }  footer { padding: 7rem 1rem 2rem; font-size: 0.8rem; } .footer-socials a { color: inherit !important; } .footer-socials a:is(:hover, :focus) { color: var(--orange) !important; }