@charset "UTF-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; line-break: after-white-space; -moz-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } html { font-size: 62.5%; overflow-x: hidden; } body { overflow-x: hidden; --color-white: #FFF; --color-white-plus: #EEE; --color-black: #222; --color-main: #36223D; --color-accent: #B46088; --color-gray: #A2A2A2; --color-dark-gray: #515151; --color-light-gray: #E1E1E1; --text-color: var(--color-black); --background-color: var(--color-white-plus); --border: 1px solid var(--color-main); background-color: var(--background-color); font-family: "Poppins", Helvetica, Arial, sans-serif; line-height: 1.2; font-weight: 200; margin: auto; overflow-x: hidden; font-size: var(--base-font-size); --normal-weight: 200; --bold-weight: 400; --extra-bold-weight: 500; --padding-l: 64px; --padding-m: 32px; --padding-s: 16px; --padding-detail: 16px; --headline-size: 2rem; --base-font-size: 1.4rem; } body .bg-color { --border: 1px solid var(--color-white); } @media screen and (min-width: 800px) { body { --padding-l: 128px; --padding-m: 64px; --padding-s: 32px; --headline-size: 4rem; --base-font-size: 2rem; } } body.no-scroll { overflow: hidden; } h1, h2, h3, h4 { margin: 0; margin-bottom: var(--padding-detail); font-weight: 400; } h1 { font-size: 3.2rem; } h2 { font-size: 2rem; } h3 { font-size: 1.8rem; } h4 { font-size: 1.4rem; } @media screen and (min-width: 800px) { h2 { font-size: 4rem; } } a:not(.button) { color: inherit; transition: color 0.6s ease; } a:not(.button):hover { color: var(--color-accent); } p { margin: 0 0 var(--padding-detail); } strong { font-weight: 400; } em { font-style: italic; } ul, ol { margin: 1em 0; margin-left: 2.6rem; } ul { list-style: disc; } ol { list-style-type: decimal; } button { cursor: pointer; } nav ul, nav ol { display: flex; margin: 0; padding: 0; list-style: none; } .main-content { margin: auto; } .main-content p { margin-bottom: 1em; } @media screen and (min-width: 800px) { .main-content { padding-top: 49px; } } .container { width: 94%; max-width: 1440px; margin-left: auto; margin-right: auto; } .content-container, .page-header .preamble { width: 94%; max-width: 1600px; margin-left: auto; margin-right: auto; } @media all and (min-width: 1080px) { .content-container, .page-header .preamble { width: 80%; max-width: 1600px; } } .button { display: inline-block; background-color: var(--color-main); color: var(--background-color); padding: 8px 16px; font-size: 1.4rem; transition: all 0.6s ease; margin-right: auto; font-weight: 500; cursor: pointer; } .button:hover { background-color: var(--color-accent); } .button.button-secondary, .bg-white .card .button { background-color: var(--color-accent); color: var(--color-main); } .button.button-secondary:hover, .bg-white .card .button:hover { background-color: var(--background-color); } .main-content figure { opacity: 0; } .main-content figure.no-fade { opacity: 1; } .main-content figure.fade-in { animation: slideIn 0.8s ease 0.3s forwards; } .main-content figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } @keyframes slideIn { 0% { -webkit-transform: translateY(40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } .block:not(.block-heading, .block-list, .block-text) { padding-bottom: var(--padding-l); } .block:not(.block-heading, .block-list, .block-text) .label { font-size: var(--base-font-size); font-weight: var(--extra-bold-weight); margin-bottom: var(--padding-s); color: var(--color-main); } .block:not(.block-heading, .block-list, .block-text) .headline { font-size: var(--headline-size); margin-bottom: var(--padding-s); } .block:not(.block-heading, .block-list, .block-text).bg-color .label { color: var(--color-accent); } .edit-button { position: fixed; z-index: 100; bottom: 0; left: 50%; transform: translateX(-50%); box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25); border-radius: 32px 0 32px 0 32px 0 32px 0 0 0; background-color: var(--background-color); } .edit-button a { display: flex; padding: 12px; } .blocks .block.bg-color { background-color: var(--color-main); color: var(--background-color); } .blocks .block { padding: var(--padding-l) 0; } .blocks .block:last-of-type.bg-white { padding-bottom: var(--padding-m); } .blocks .bg-white + .bg-white { padding-top: 0; } .blocks .bg-color + .bg-color { padding-top: 0; } .hero-bg-white .block:first-of-type.bg-white { padding-top: 0; } .hero-bg-color .block:first-of-type.bg-color { padding-top: 0; } .bg-color { background-color: var(--color-main); color: var(--background-color); } .glide__track { overflow: visible; } .glide__slides { cursor: grab; } .glide__slides:active { cursor: grabbing; } .glide__slides .glide__slide { height: auto; display: flex; flex-direction: column; } .error { padding: var(--padding-l) 0; } .error p { max-width: 800px; } .template-contact .cardlist { padding: var(--padding-l) 0; } .template-contact .cardlist h2 { padding-bottom: var(--padding-m); } .template-contact .cardlist .card h3 { margin-bottom: calc(var(--padding-detail) / 2); } .template-contact .cardlist .card h4 { font-weight: 200; } .template-home .blocks .block:first-of-type.bg-white { padding-top: var(--padding-l); } .template-newslist .articles, .template-servicelist .articles, .template-listpage .articles { padding: var(--padding-l) 0; } .template-newslist .articles h2, .template-servicelist .articles h2, .template-listpage .articles h2 { margin-bottom: var(--padding-m); } .template-newslist .articles .filter, .template-servicelist .articles .filter, .template-listpage .articles .filter { display: flex; align-items: center; margin-bottom: var(--padding-m); flex-wrap: wrap; } .template-newslist .articles .filter p, .template-servicelist .articles .filter p, .template-listpage .articles .filter p { font-weight: 400; margin: 0; margin-right: var(--padding-m); margin-bottom: var(--padding-detail); flex-basis: 100%; } .template-newslist .articles .filter ul, .template-servicelist .articles .filter ul, .template-listpage .articles .filter ul { padding: 0; margin: 0; list-style: none; display: inherit; flex-wrap: wrap; } .template-newslist .articles .filter ul li, .template-servicelist .articles .filter ul li, .template-listpage .articles .filter ul li { margin-right: var(--padding-s); border-radius: 7px; } .template-newslist .articles .filter ul li a, .template-servicelist .articles .filter ul li a, .template-listpage .articles .filter ul li a { display: flex; padding: calc(var(--padding-detail) / 2) 0; } .template-newslist .articles .filter ul li.filter-active, .template-servicelist .articles .filter ul li.filter-active, .template-listpage .articles .filter ul li.filter-active { border: var(--border); transition: border-color 0.6s ease; } .template-newslist .articles .filter ul li.filter-active:hover, .template-servicelist .articles .filter ul li.filter-active:hover, .template-listpage .articles .filter ul li.filter-active:hover { border-color: var(--color-accent); } .template-newslist .articles .filter ul li.filter-active a, .template-servicelist .articles .filter ul li.filter-active a, .template-listpage .articles .filter ul li.filter-active a { padding-left: var(--padding-detail); padding-right: var(--padding-detail); } .template-newslist .articles .pagination, .template-servicelist .articles .pagination, .template-listpage .articles .pagination { display: flex; margin-top: var(--padding-s); } .template-newslist .articles .pagination .next, .template-servicelist .articles .pagination .next, .template-listpage .articles .pagination .next { margin-left: auto; } @media screen and (min-width: 800px) { .template-newslist .articles .filter p, .template-servicelist .articles .filter p, .template-listpage .articles .filter p { flex-basis: auto; margin-bottom: 0; } } .template-serviceitem .related-services { padding: var(--padding-l) 0; } .videntes-frame { padding-bottom: var(--padding-l); overflow: hidden; --baseline-color: var(--color-main); } .videntes-frame .page-header.smallheadline .intro h2 { font-weight: var(--normal-weight); } .videntes-frame .main-layout { display: flex; flex-direction: column; } .videntes-frame .info { margin-bottom: var(--padding-m); order: 1; } .videntes-frame .info .button { display: inline-block; margin-top: var(--padding-s); border: 1px solid var(--color-white); padding-right: 34px; background-image: url(/assets/icons/info.svg); background-position: right 12px center; background-repeat: no-repeat; background-size: 14px; } .videntes-frame .label { display: block; font-size: var(--base-font-size); font-weight: var(--extra-bold-weight); margin-bottom: var(--padding-s); color: var(--color-main); } .videntes-frame.bg-color { --baseline-color: var(--background-color); } .videntes-frame.bg-color .label { color: var(--color-accent); } .videntes-frame .step-hero { padding-top: var(--padding-l); } .videntes-frame figcaption { margin-top: var(--padding-detail); font-size: 1.4rem; } .videntes-frame .page-header { padding-bottom: var(--padding-m); } .videntes-frame .media { padding-bottom: var(--padding-m); } .videntes-frame .media video { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .videntes-frame .videntes-footer { margin-top: var(--padding-m); padding-top: var(--padding-m); padding-left: var(--padding-m); position: relative; display: flex; } .videntes-frame .videntes-footer:before { content: ""; background-image: url(/assets/images/trassel.svg); background-position: bottom 0 right 0; background-repeat: no-repeat; position: absolute; height: 520px; width: 228px; bottom: -220px; left: -195px; } .videntes-frame .videntes-link { font-weight: var(--bold-weight); padding: 5px var(--padding-detail) 4px; background: transparent; border: 2px solid currentColor; position: relative; margin-right: 50px; z-index: 2; font-size: 1.4rem; flex-shrink: 1; } .videntes-frame .videntes-link:not(:first-of-type):before { content: ""; position: absolute; height: 2px; background-color: currentColor; width: 50px; right: calc(100% + 2px); top: 13px; z-index: 1; } .videntes-frame .videntes-link.current-step { background-color: var(--color-accent); border-color: var(--color-accent); } .videntes-frame .videntes-link.current-step:hover { color: var(--color-main); } .videntes-frame .videntes-link.current-step:before { background-color: var(--color-accent); } .videntes-frame .videntes-link.earlier-step { border-color: var(--color-accent); } .videntes-frame .videntes-link.earlier-step:before { background-color: var(--color-accent); } @media screen and (min-width: 800px) { .videntes-frame { padding-bottom: 22px; } .videntes-frame .main-layout { display: flex; flex-direction: row; gap: 4%; } .videntes-frame .main-layout > * { flex: 1 1 48%; } .videntes-frame .main-layout .media { order: 2; } .videntes-frame .videntes-footer { display: flex; justify-content: space-between; padding-bottom: 26px; } .videntes-frame .videntes-footer:before { width: 500px; left: -434px; bottom: -194px; } .videntes-frame .videntes-footer .videntes-link { margin-right: 0; z-index: 2; } .videntes-frame .videntes-footer .videntes-link:not(:last-child):after { content: ""; position: absolute; height: 2px; background-color: var(--baseline-color); width: 10vw; left: calc(100% + 2px); top: 13px; z-index: 1; pointer-events: none; } .videntes-frame .videntes-footer .videntes-link:before { z-index: 1; width: 10vw; background-color: var(--baseline-color); pointer-events: none; } .videntes-frame .videntes-footer .videntes-link.earlier-step:after, .videntes-frame .videntes-footer .videntes-link.earlier-step:before, .videntes-frame .videntes-footer .videntes-link.current-step:before { background-color: var(--color-accent); } } #service-overlay { background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; padding: var(--padding-s); display: none; justify-content: center; align-items: center; } #service-overlay.show { display: flex; } #service-overlay .service-modal { height: 100%; max-height: calc(100dvh - var(--padding-s) * 2); margin: auto; position: relative; max-width: 1200px; } #service-overlay .service-modal .service-modal--fixed { position: absolute; inset: 0; pointer-events: none; z-index: 100; } #service-overlay .service-modal .service-modal--scroll { padding: var(--padding-l) var(--padding-m); overflow-y: auto; height: 100%; } #service-overlay .service-modal .shapes { height: 100%; display: flex; flex-direction: column; } #service-overlay .service-modal .shapes img { width: auto; height: 80px; } #service-overlay .service-modal .shapes .blue { margin-top: auto; } #service-overlay .service-modal .close-button { position: absolute; top: var(--padding-m); right: var(--padding-m); } #service-overlay .service-modal .modal-header p { max-width: 800px; } #service-overlay .service-modal .service-layout article { flex: 0 1 32%; margin-top: var(--padding-s); } #service-overlay .service-modal .service-layout article h3 { font-size: 1.4rem; text-transform: uppercase; color: var(--color-accent); } #service-overlay .service-modal .service-layout article p { font-size: 1.4rem; } @media screen and (min-width: 500px) { #service-overlay .service-modal { height: 800px; max-height: 80vh; } #service-overlay .service-modal .shapes .pink { margin-right: auto; } #service-overlay .service-modal .shapes .blue { margin-left: auto; } #service-overlay .service-modal .service-layout { display: flex; flex-wrap: wrap; gap: 2%; } #service-overlay .service-modal .service-layout article { flex: 0 1 49%; } } @media screen and (min-width: 800px) { #service-overlay { padding: var(--padding-m); } #service-overlay .service-modal { background-size: 600px, 400px; } #service-overlay .service-modal .service-layout article { flex: 0 1 32%; } } @media screen and (max-width: 800px) { .videntes-footer.pos-2-4 { left: -125px; } .videntes-footer.pos-3-4 { left: -250px; } .videntes-footer.pos-4-4 { left: -270px; } } .article-blocks .block { padding: var(--padding-l) 0; } .article-blocks .block:first-child { padding: var(--padding-m) 0; } .article-blocks .bg-white + .bg-white { padding-top: 0; } .card { border-radius: 32px 0 32px 0; overflow: hidden; background-color: var(--color-main); color: var(--color-white); } .card figure { aspect-ratio: 5/4; overflow: hidden; background-image: url(/assets/images/placeholder.png); background-size: cover; background-position: center; } .card .info { padding: var(--padding-detail); display: flex; flex-direction: column; flex-grow: 1; } .card .info h4, .card .info h3 { margin: 0; margin-bottom: var(--padding-detail); font-size: 1.4rem; } .card .info h4 { text-transform: uppercase; color: var(--color-accent); font-weight: var(--extra-bold-weight); } .card .info .button { margin-top: auto; } .card .info a:not(.button) { color: var(--color-main); font-weight: 400; font-size: 1.4rem; } .card .info a:not(.button):hover { color: var(--color-accent); } .card.card--row { display: flex; flex-direction: column; } .card.card--row figure { order: 0; aspect-ratio: 1/1; flex: 1 1 50%; } .card.card--row .info { padding: var(--padding-m); width: 280px; } .card.card--row p { font-size: 1.4rem; } .card.card--narrow { display: flex; flex-direction: column; flex: 0 1 49%; } .card.card--narrow figure { aspect-ratio: 1/1; } .bg-color .card .info { background-color: var(--background-color); } .bg-color .card .info h3 { color: var(--color-main); } .bg-color .card .info p { color: var(--color-black); } .cardlist .card { margin-bottom: var(--padding-detail); } @media all and (min-width: 500px) { .card.card--row { flex-direction: row-reverse; } } @media all and (min-width: 800px) and (max-width: 1080px) { .card.card--row { flex-direction: column; height: auto; } .card.card--row figure { flex: unset; order: 0; } .card.card--row .info { padding: var(--padding-s); width: unset; flex-grow: 1; } .card.card--row h3 { font-size: 20px; margin-bottom: var(--padding-s); } .card.card--row p { margin-bottom: var(--padding-s); } } @media all and (min-width: 1080px) { .card.card--row { max-height: 350px; } .card.card--row figure { flex: 1 1 20%; } .card.card--row .info { padding: var(--padding-s); width: 280px; flex: unset; } .card.card--row h3 { font-size: 20px; margin-bottom: var(--padding-s); } .card.card--row p { margin-bottom: var(--padding-s); } } .cardlist h2 { color: var(--color-main); } .cardlist .layout:not(:first-child) { margin-top: var(--padding-m); } @media screen and (min-width: 500px) { .cardlist .layout { display: flex; flex-wrap: wrap; gap: 2%; } .cardlist .layout.blurbs { gap: 4%; } } @media screen and (min-width: 800px) { .cardlist .layout .card { flex-basis: 32%; } .cardlist .layout.blurbs .card { flex-basis: 48%; } } @media screen and (min-width: 1080px) { .cardlist .layout .card { flex-basis: 23.5%; } .cardlist .layout .card.person-card { flex-basis: 32%; } } .bg-color .cardlist h2 { color: var(--background-color); } .site-footer { display: flex; flex-direction: column; padding-top: var(--padding-m); font-size: 1.4rem; } .site-footer a { color: var(--color-main); } .site-footer .top-border { padding-top: var(--padding-m); border-top: 1px solid var(--color-main); display: flex; width: 94%; margin-left: 3%; margin-right: 3%; } .site-footer .footer-logo { margin-bottom: calc(var(--padding-detail) * 2); } .site-footer .site-info { display: flex; gap: var(--padding-detail); font-weight: 400; flex-wrap: wrap; } .site-footer .site-info h3 { margin-bottom: 0.5rem; } .site-footer .site-info p { margin-top: 0.5rem; margin-bottom: var(--padding-detail); } .site-footer .site-info > * { flex: 0 1 48%; } .site-footer .site-info .certs { margin-left: auto; } .site-footer .site-info .certs img { width: 60px; } .site-footer .footer-menus { display: flex; flex-wrap: wrap; gap: var(--padding-detail); font-weight: 400; } .site-footer .footer-menus .footer-menu { flex: 1 1 45%; } .site-footer .footer-menus .footer-menu h4 { margin-bottom: calc(var(--padding-detail) * 2); font-weight: var(--extra-bold-weight); } .site-footer .footer-menus .footer-menu ul { display: flex; flex-direction: column; margin-bottom: 40px; } .site-footer .footer-menus .footer-menu ul li { margin-bottom: var(--padding-detail); line-height: 1; } .site-footer .footer-menus .footer-menu ul li:last-child { margin-bottom: 0; } .site-footer .footer-menus .footer-menu ul li a:hover { color: var(--color-accent); } .site-footer .footer-menus .footer-menu .social-media { padding-right: var(--padding-detail); background-image: url(/assets/icons/arrow-right.svg); background-position: right center; background-repeat: no-repeat; } .site-footer .rights { background-color: var(--color-main); margin-top: var(--padding-m); color: var(--color-white); font-weight: 400; width: 100%; padding: calc(var(--padding-detail) / 2) 0; } @media all and (min-width: 500px) { .site-footer { flex-direction: row; flex-wrap: wrap; } .site-footer .site-info { width: 100%; } .site-footer .footer-menus { display: flex; width: 100%; } .site-footer .footer-menus .footer-menu { width: 50%; } } @media all and (min-width: 800px) { .site-footer .footer-main { display: flex; } .site-footer .footer-main .site-info { width: 50%; } .site-footer .footer-main .footer-menus { order: 1; width: 50%; } } @media screen and (min-width: 1080px) { .site-footer .footer-main .site-info { width: 50%; } .site-footer .footer-main .footer-menus { order: 1; width: 50%; margin-left: auto; } .site-footer .footer-main .footer-menus .footer-menu { flex-basis: 30%; } } .site-header { position: relative; z-index: 100; background-color: var(--background-color); height: 34px; display: flex; align-items: center; justify-content: flex-end; z-index: 100; padding: 0 3%; } .site-header figure { height: 17px; } .site-header .site-logo { height: 17px; margin-right: auto; } .site-header .main-menu { display: none; } .site-header .secondary-menu { display: none; } .site-header #secondaryMenuButton { display: none; } @media (min-width: 800px) { .site-header .main-menu { display: block; } .site-header .main-menu a { color: var(--color-main); font-size: 1.4rem; font-weight: 400; transition: color 0.6s ease; } .site-header .main-menu a:hover { color: var(--color-accent); } .site-header .main-menu li.has-submenu { position: relative; } .site-header .main-menu li.has-submenu a { padding-right: 2px; } .site-header .main-menu li.has-submenu img { transition: transform 0.6s ease; } .site-header .main-menu li.has-submenu.closed .submenu-bg { height: 0px !important; } .site-header .main-menu li.has-submenu.open .submenu { opacity: 1; pointer-events: all; } .site-header .main-menu li.has-submenu.open .submenuButton img { transform: rotate(180deg); } .site-header .main-menu li .submenu-icon { width: 10px; height: 10px; margin-right: 16px; } .site-header .main-menu li .submenu-bg { position: fixed; top: 49px; left: 0; right: 0; background-color: var(--background-color); transition: height 0.6s ease; } .site-header .main-menu li .submenu { display: flex; flex-direction: column; position: absolute; left: 0; transition: all 0.6s ease; opacity: 0; pointer-events: none; min-width: 150px; margin: 0; padding-top: var(--padding-detail); } .site-header .main-menu li .submenu li { display: flex; background: transparent; padding: 0; height: 34px; align-items: center; } .site-header .main-menu li .submenu li a { padding: 0; padding-left: var(--padding-detail); } .site-header .main-menu .current-class > a { color: var(--color-accent); } .site-header .main-menu a { padding: 14px; position: relative; } .site-header #secondaryMenuButton { display: flex; padding-left: 3%; } } @media screen and (min-width: 800px) { .site-header { position: fixed; height: 49px; width: 100%; height: 49px; } .site-header .secondary-menu { position: fixed; display: flex; right: 0; top: 49px; z-index: 10; pointer-events: none; width: 100%; } .site-header .secondary-menu ul { z-index: 50; opacity: 0; transition: opacity 0.6s ease; display: flex; flex-direction: column; pointer-events: none; margin-left: auto; margin-right: 3%; } .site-header .secondary-menu ul li { height: 34px; display: flex; align-items: center; justify-content: flex-end; } .site-header .secondary-menu ul li a { font-size: 1.4rem; font-weight: 400; text-align: right; } .site-header .secondary-menu ul li.current-class a { color: var(--color-accent); } .site-header .secondary-menu.open ul { opacity: 1; pointer-events: all; } } .secondary-menu-bg { display: none; position: fixed; width: 100%; top: 49px; left: 0; right: 0; transform: translateY(-100%); z-index: 5; background-color: var(--background-color); transition: transform 0.6s ease; } .secondary-menu-bg.open { transform: translateY(0); } @media screen and (min-width: 800px) { .secondary-menu-bg { display: flex; } } .toggle-menu { height: 30px; background: transparent; color: var(--color-white); right: 3%; text-align: center; z-index: 103; display: flex; align-items: center; } .toggle-menu#mobileMainMenuToggle { width: 17px; } .toggle-menu svg { height: 17px !important; } @media all and (min-width: 800px) { .toggle-menu#mobileMainMenuToggle { display: none; } } .mobile-menu nav { position: absolute; top: 34px; padding-top: 50px; padding-bottom: var(--padding-l); padding-left: 3%; padding-right: 3%; transform: translateY(0); left: 0; width: 100%; z-index: 10; background: var(--background-color); transition: all 0.6s ease; display: flex; flex-wrap: wrap; } .mobile-menu nav h4 { width: 25%; } .mobile-menu nav ul { display: flex; flex-direction: column; width: 75%; margin-left: auto; } .mobile-menu nav ul li { display: flex; flex-wrap: wrap; } .mobile-menu nav ul li a { font-size: 2rem; font-weight: 400; color: var(--color-main); line-height: 1; margin-bottom: var(--padding-detail); } .mobile-menu nav ul li a:hover { color: var(--color-accent); } .mobile-menu nav ul li.current-class > a { color: var(--color-accent); } .mobile-menu nav ul li ul.submenu { margin: 0; margin-left: var(--padding-m); display: none; width: 100%; opacity: 0; transition: opacity 0.6s ease; margin-bottom: var(--padding-s); } .mobile-menu nav ul li ul.submenu.open { opacity: 1; display: block; } .mobile-menu nav ul .submenu-button { height: 22px; padding-left: calc(var(--padding-detail)); display: flex; justify-content: center; } .mobile-menu nav ul .submenu-button img { transition: transform 0.6s ease; width: 12px; } .mobile-menu nav ul .submenu-button.open img { transform: rotate(180deg); } .mobile-menu.closed nav { transform: translateY(calc(-100% - 34px)); } @media all and (min-width: 500px) { .mobile-menu nav .main-menu { position: absolute; top: 65px; bottom: auto; } } @media all and (min-width: 800px) { .mobile-menu { display: none; } } .page-header { padding-bottom: var(--padding-l); --border-color: var(--color-main); } .page-header figure { aspect-ratio: 1/1; } .page-header .intro { width: 94%; margin-left: auto; margin-right: auto; } .page-header .label { padding-top: var(--padding-l); margin-bottom: var(--padding-s); font-size: 1.4rem; color: var(--color-main); font-weight: 400; } .page-header .headline { margin-bottom: var(--padding-detail); font-weight: 200; } .page-header .preamble .datatable { border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; margin-top: var(--padding-l); } .page-header .preamble .datatable dt, .page-header .preamble .datatable dd { width: 50%; line-height: 32px; border-bottom: 1px solid var(--border-color); } .page-header .preamble .datatable dt { font-weight: 400; padding-right: var(--padding-detail); } .page-header.bg-color { --border-color: var(--color-white); background-color: var(--color-main); color: var(--color-white); } .page-header.bg-color .label { color: var(--color-accent); } .page-header .contact { order: 6; display: flex; font-size: 1.4rem; font-weight: 400; width: 94%; margin: auto; color: var(--color-main); } .page-header .contact > * { flex: 1 1 50%; } @media screen and (min-width: 800px) { .page-header .header-container { width: 80%; max-width: 1600px; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--padding-detail); } .page-header .intro .label { font-size: 2rem; } .page-header .intro .headline { font-size: 4.2rem; } .page-header .contact { font-size: 1.6rem; margin-left: 0; } .page-header.bigheadline .intro { width: 100%; } .page-header.bigheadline figure { order: 3; flex: 0 1 48%; aspect-ratio: 3/4; } .page-header.bigheadline .preamble { display: flex; flex-direction: column; flex: 0 1 48%; margin-left: 0; } .page-header.bigheadline .preamble .datatable { margin-top: auto; } .page-header.bigheadline .preamble .datatable dt, .page-header.bigheadline .preamble .datatable dd { line-height: 44px; } .page-header.smallheadline .header-container { overflow: hidden; } .page-header.smallheadline figure { flex: 1 1 48%; order: 3; margin: 0; top: 0; padding-top: var(--padding-l); } .page-header.smallheadline .hero-group { flex: 1 1 48%; } .page-header.smallheadline .hero-group > * { width: 100%; } .page-header.smallheadline .intro h2 { font-weight: 400; } } .related-articles { padding: var(--padding-l) 0; } .related-articles p { margin-bottom: var(--padding-m); } .related-articles p > a { font-size: 1.4rem; font-weight: 400; color: var(--color-accent); padding-right: 16px; background-image: url(/assets/icons/arrow-right-magenta.svg); background-repeat: no-repeat; background-position: right center; transition: padding-right 0.6s ease; } .related-articles p > a:hover { padding-right: 20px; } .video-hero { display: flex; flex-direction: column; background-color: var(--color-main); } .video-hero h1 { text-align: center; color: var(--color-white); font-size: clamp(3rem, 7vw, 10rem); margin: 0; margin-top: var(--padding-m); margin-bottom: var(--padding-s); width: 90%; max-width: 150rem; } .video-hero .video-holder { display: flex; position: relative; width: 100%; height: 80vh; } .video-hero .video-holder video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .video-hero .overlay { position: absolute; display: flex; flex-direction: column; top: 0; bottom: 0; left: 0; right: 0; background: color-mix(in srgb, var(--color-white) 30%, transparent); align-items: center; justify-content: center; } .video-hero .overlay .button { margin-left: auto; } .block-accordion article .accordions ul { margin: 0; padding: 0; list-style: none; border-top: var(--border); } .block-accordion article .accordions ul .drawer { border-bottom: var(--border); } .block-accordion article .accordions ul .drawer h4 { line-height: 40px; margin-bottom: 0; cursor: pointer; position: relative; transition: all 0.6s ease; } .block-accordion article .accordions ul .drawer h4:after { position: absolute; right: 0; top: 0; content: ""; width: 30px; height: 40px; background-image: url(/assets/icons/plus_icon.svg); background-size: contain; transition: transform 0.6s ease; } .block-accordion article .accordions ul .drawer .toggle-content { display: none; transform-origin: top; margin-bottom: 0; padding: 0; padding-top: 12px; } .block-accordion article .accordions ul .drawer.status-open .toggle-content { display: block; opacity: 1; margin-bottom: 14px; } .block-accordion article .accordions ul .drawer.status-open h4:after { transform: rotate(45deg); } @media screen and (min-width: 800px) { .block-accordion article { display: flex; gap: 4%; } .block-accordion article .accordions-info { flex: 1 1 48%; } .block-accordion article .accordions { margin-top: 184px; flex: 1 1 48%; } .block-accordion article .accordions ul .drawer h4 { font-size: 2rem; } .block-accordion article .accordions ul .drawer h4:hover { background-color: color-mix(in srgb, var(--color-main) 30%, transparent); padding-left: 2rem; color: var(--color-main); } } .block-articletextimage .article-textimage figure { aspect-ratio: 3/2; margin-bottom: var(--padding-m); } @media screen and (min-width: 800px) { .block-articletextimage .article-textimage { display: flex; gap: 4%; } .block-articletextimage .article-textimage figure { aspect-ratio: 3/2; flex: 1 1 48%; margin-bottom: 0; } .block-articletextimage .article-textimage .text-content { flex: 1 1 48%; } .block-articletextimage .article-textimage .text-content h2:not(:first-child), .block-articletextimage .article-textimage .text-content h3:not(:first-child) { margin-top: var(--padding-s); } } .block-downloads article .downloads-files ul { margin: 0; padding: 0; list-style: none; border-top: var(--border); } .block-downloads article .downloads-files ul li { border-bottom: var(--border); display: flex; } .block-downloads article .downloads-files ul li a { flex: 1; line-height: 40px; font-weight: 400; background-image: url(/assets/icons/download.svg); background-repeat: no-repeat; background-position: center right 12px; transition: all 0.6s ease; } @media screen and (min-width: 800px) { .block-downloads article { display: flex; gap: 4%; } .block-downloads article .downloads-info { flex: 1 1 48%; } .block-downloads article .downloads-files { margin-top: 140px; flex: 1 1 48%; } .block-downloads article .downloads-files ul li a:hover { background-color: color-mix(in srgb, var(--color-main) 30%, transparent); padding-left: 2rem; color: var(--color-main); } } .block-editor article p a { text-decoration: underline; } @media screen and (min-width: 800px) { .block-editor article.column { width: 66%; } .block-editor article.columns { -moz-columns: 2; columns: 2; -moz-column-gap: 4%; column-gap: 4%; } } .block-linkblurbs a.headerlink { font-size: 1.4rem; font-weight: 400; color: var(--color-accent); padding-right: 16px; background-image: url(/assets/icons/arrow-right-magenta.svg); background-repeat: no-repeat; background-position: right center; transition: padding-right 0.6s ease; } .block-linkblurbs a.headerlink:hover { padding-right: 20px; } .block-linkblurbs.bg-white .cardlist .card { background-color: var(--color-white); color: var(--color-main); } .block-linkblurbs.bg-white .cardlist .card .button { background-color: var(--color-main); color: var(--color-white); } .block-linkblurbs.bg-white .cardlist .card .button:hover { background-color: var(--color-accent); } .block-pageswiper h2 { padding-bottom: calc(var(--padding-detail) * 2); } .block-pageswiper .card { width: 80%; } .block-pageswiper .card h3 { font-size: var(--base-font-size); } .block-preamble p { font-weight: 200; font-size: 2rem; } .block-preamble p a { text-decoration: underline; } @media screen and (min-width: 500px) { .block-preamble p { font-size: 4.2rem; } } .block-quote blockquote { font-size: 2rem; max-width: 800px; } .block-quote blockquote footer { margin-top: var(--padding-s); color: var(--color-accent); font-weight: 400; font-size: var(--base-font-size); } @media screen and (min-width: 800px) { .block-quote blockquote { font-size: 4rem; } }