:root { --brown: #be7557; --blue: #84cfeb; --gray: #f2f2f2; --black: #454545; --white: #ffffff; --brown-rgb: 190,117,87; --blue-rgb: 132,207,235; --blue-dark: #296d87; --error: #a63b3b;  --header-height: 110px; --header-height-mobile: 50px; --gap: 1rem; --border-radius: 1.75rem; --image-height: 22rem; --transition-duration: 0.25s; --transition: ease var(--transition-duration); } @media (max-width: 991px) { :root { --header-height: var(--header-height-mobile); } } @media (max-width: 767px) { :root { --image-height: 16.5rem; } } @media (max-width: 478px) { :root { --gap: 0.5rem; } }  @media (max-width: 600px) { body.bricks-is-frontend.admin-bar #brx-header.sticky.scrolling { top: 0; } }  html, body { font-family: "Nunito Sans"; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--black); } body { background-color: var(--white); overflow-x: clip; } ::selection { background-color: var(--brown); color: var(--white); } .hidden { display: none!important; opacity: 0; visibility: hidden; } svg { width: 100%; height: 100%; } body.bricks-is-frontend :focus-visible { outline: 2px outset var(--brown); }  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1.5rem; font-weight: 700; line-height: normal; text-transform: uppercase; text-wrap: balance; } h1, .h1 { font-size: 2.308rem; } h2, .h2 { font-size: 2.045rem; } h3, .h3 { font-size: 1.591rem; } h4, .h4 { font-size: 1.136rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1.1rem; } .brxe-heading.bricks-type-hero { font-size: 6.182rem; } .brxe-heading span { display: block; font-size: 2.5em; } @media (max-width: 991px) { h1, .h1 { font-size: 2.25rem; } h2, .h2 { font-size: 1.75rem; } h3, .h3 { font-size: 1.5rem; } h4, .h4 { font-size: 1.25rem; } h5, .h5 { font-size: 1.1rem; } h6, .h6 { font-size: 1rem; } .brxe-heading.bricks-type-hero { font-size: 3rem; } } @media (max-width: 767px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1rem; } h1, .h1 { font-size: 1.75rem; } h2, .h2 { font-size: 1.5rem; } h3, .h3 { font-size: 1.25rem; } h4, .h4 { font-size: 1.1rem; } h5, .h5 { font-size: 1.05rem; } .brxe-heading.bricks-type-hero { font-size: 2.5rem; } .brxe-heading span { font-size: 2em; } } .brxe-text + :where(h2, h3, h4, h5, h6), p + :where(h2, h3, h4, h5, h6) { margin-top: 1em; } p { margin-bottom: 1em; } p:last-of-type { margin-bottom: 0; } b, strong { font-weight: 700; } a { transition: var(--transition); } .brxe-text a:not(.bricks-button), a.brxe-text-link .text, a.brxe-text-link .icon { color: inherit; transition: var(--transition-duration); } a.brxe-text-link .icon path { fill: currentColor; } .brxe-text a:not(.bricks-button):is(:hover, :focus) { color: var(--brown); } a.brxe-text-link:is(:hover, :focus) :where(.icon, .text) { color: var(--brown); } .brxe-text :where(ul, ol) { margin: 1em 0; padding-left: 1.5em; } .dsgvo-reference { font-size: 0.8rem; }  section section { padding: 0; } section .brxe-container { align-items: center; } main > section:first-child:not(.hero) { margin-top: var(--header-height); } .section-content .container--narrow { align-items: flex-start; text-align: left; }  header { display: flex; height: var(--header-height); padding: 0 1rem; color: var(--white); transition: var(--transition) !important; position: fixed; } #brx-header.sticky.on-scroll { position: fixed; } header.scrolling { height: var(--header-height-mobile); background-color: var(--brown); }  div.brxe-nav-menu .bricks-nav-menu a { transition: var(--transition) !important; } header .brxe-nav-menu .bricks-nav-menu a:is(:hover, :focus) { color: var(--blue); }  :where(header, footer) .brx-submenu-toggle.icon-right button { width: 1rem; }  .bricks-mobile-menu { padding: 1.5rem 0; } .bricks-mobile-menu li { padding: 0.5rem 1rem; } 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; }  .aria-current > a, a[aria-current="page"]:not(.bricks-button), .brxe-nav-menu .bricks-nav-menu a[aria-current="page"], :where(.brxe-nav-menu) .bricks-nav-menu .sub-menu a[aria-current="page"] { color: var(--blue); }  footer ul.bricks-nav-menu { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 5rem; row-gap: 2rem; } @media (max-width: 991px) { footer ul.bricks-nav-menu { grid-template-columns: repeat(auto-fit, minmax(10ch, 25%)); column-gap: 2rem; } } @media (max-width: 478px) { footer ul.bricks-nav-menu { row-gap: 1rem; } }  .bricks-button { padding: 0.5rem 1.5rem; border: 1px solid var(--blue); border-radius: 0.5rem; background-color: var(--blue); font-size: 0.9rem; line-height: normal; color: var(--white); cursor: pointer; transition: var(--transition-duration); } .bricks-button.bricks-background-secondary { border-color: var(--white); background-color: var(--white); color: var(--blue); } .bricks-button.outline { border-width: 1px; border-color: var(--blue); background-color: transparent; color: var(--blue); } .bricks-button:is(:hover, :focus) { background-color: transparent; color: var(--blue); } .bricks-button.bricks-background-secondary:is(:hover, :focus), .bricks-button.outline:is(:hover, :focus) { background-color: var(--blue); color: var(--white); }  .hero { max-height: 33rem; } .home .hero { max-height: 70rem; }  .project-teaser-wrapper, .switcher-gallery { --gap: 1.25rem; } .project-teaser, .switcher-gallery li { position: relative; width: calc(70% - var(--gap) / 2); overflow: hidden; } .project-teaser:nth-child(4n+2), .project-teaser:nth-child(4n+3), .switcher-gallery li:nth-child(4n+2), .switcher-gallery li:nth-child(4n+3) { width: calc(30% - var(--gap) / 2); } .project-teaser:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--blue-dark); opacity: 0; transition: var(--transition); } .project-teaser .project-teaser__content { flex-grow: 0; transition: var(--transition); } .project-teaser p { max-height: 0; opacity: 0; transition: var(--transition-duration); }  .project-teaser:is(:hover, :focus) .project-teaser__content { flex-grow: 0.6; max-height: unset; } .project-teaser:is(:hover, :focus):before { opacity: 0.65; } .project-teaser:is(:hover, :focus) p { max-height: 10rem; opacity: 1; } @media (max-width: 991px) { .project-teaser, .switcher-gallery li { width: calc(60% - var(--gap) / 2); } .project-teaser:nth-child(4n+2), .project-teaser:nth-child(4n+3), .switcher-gallery li:nth-child(4n+2), .switcher-gallery li:nth-child(4n+3) { width: calc(40% - var(--gap) / 2); } } @media (max-width: 767px) { .project-teaser-wrapper, .switcher-gallery { --gap: 0.75rem; } } @media (max-width: 478px) { .project-teaser, .switcher-gallery li, .project-teaser:nth-child(4n+2), .project-teaser:nth-child(4n+3), .switcher-gallery li:nth-child(4n+2), .switcher-gallery li:nth-child(4n+3) { width: 100%; } }  ul.switcher-gallery { display: flex!important; } .switcher-gallery li { display: block!important; } .switcher-gallery .image { height: var(--image-height); border-radius: var(--border-radius); overflow: hidden; aspect-ratio: auto; }  .switcher-menu .tab-title { padding: 0.5em; border-radius: var(--border-radius); background-color: var(--white); font-weight: 700; text-align: center; text-transform: uppercase; transition: var(--transition); } .switcher-menu .tab-title:is(:hover, :focus) { background-color: var(--brown); color: var(--white); } .switcher-menu .tab-title.brx-open { background-color: var(--blue); color: var(--white); } .switcher-section .tab-pane strong { display: block; margin-top: 2rem; font-size: 1.2em; color: var(--blue); } .switcher-section .tab-pane .bricks-button { margin-top: 1.5rem; }  .project-gallery img { border-radius: var(--border-radius); }  .brxe-form { --_form-spacing: 1rem; } .brxe-form label { display: none; font-size: 1.25rem; font-weight: 500; } .brxe-form input:not([type="radio"], [type="checkbox"]), .brxe-form textarea { padding: 0.5rem 1rem; border: 2px solid var(--blue); background-color: var(--white); color: var(--black); line-height: normal; } .brxe-form textarea { min-height: 6rem; max-height: 25rem; resize: vertical; } .brxe-form input[type="checkbox"] { top: 0.3em!important; min-width: 0.8em; height: 0.8em; border: 1px solid var(--blue); background-color: #d9d9d9; appearance: none; } .brxe-form input[type="checkbox"]:checked { background-color: var(--blue); } .brxe-form .options-wrapper li { display: flex; flex-flow: row nowrap; column-gap: 1em; font-size: 0.8rem; } .brxe-form .options-wrapper li label { display: block; font-size: 0.8rem; width: 67ch; margin: 0; } .brxe-form .options-wrapper li label span { display: block; } .brxe-form .submit-button-wrapper { padding: 0 var(--_form-spacing); }  footer { background-color: var(--blue); color: var(--white); } footer a:is(:hover, :focus), footer div.brxe-nav-menu .bricks-nav-menu a:is(:hover, :focus), footer a[aria-current="page"], footer .brxe-nav-menu .bricks-nav-menu a[aria-current="page"] { color: var(--brown); }