h6:first-child { margin-top: 0; } @media screen and (max-width: 1023px) { .main-layout__column { flex: 0 0 auto; padding: 2rem 3.125vw 0; transform: translateY(2rem); transition: transform 1s ease-out; } .iterations-title { margin-top: 0; } .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } .main-layout__column ol li, .main-layout__column ul li { font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem); line-height: 1.20; margin-top: .8rem; padding-left: 1.75rem; } .main-header__content__title:first-child { padding-top: 0rem; padding-bottom: 30px; } } @media screen and (max-width: 800px) { .page-header { padding: 32px 26px 0 26px; } } @media only screen and (max-width: 48em) { .tabelle tr td:last-child { padding-bottom: 12px; } } u.spelling { text-decoration: black underline; } .impact-section { margin: 6rem 0; } .impact-title { color: #ef6c26; margin-bottom: 1.5rem; } .impact-list { list-style: none; padding: 0; } .impact-list li { position: relative; padding-left: 1.75rem; margin-bottom: 25px; } .impact-list li::before { content: "»"; position: absolute; left: 0; color: #ef6c26; font-weight: bold; } .desktop-main-nav { display: none; } :root { --transition-nav: all 0.3s ease-in-out; } @media screen and (min-width: 1200px) { html body .desktop-main-nav { position: absolute; top: 8rem !important; right: 8rem; display: flex; align-items: center; z-index: 100; transition: var(--transition-nav), opacity 0.4s ease, visibility 0.4s !important; } .js-menu-is-active .desktop-main-nav { display: none !important; } .desktop-main-nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .desktop-main-nav__link { font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem); color: #000; text-decoration: none; letter-spacing: 0; display: flex; align-items: center; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 0.2s ease-out, color 0.2s ease-out; } .desktop-main-nav__link:hover { color: #ef6c26; background-size: 100% 1px; } .desktop-main-nav__link--active { background: #fff; background-image: none; padding: 0.6rem 1.75rem; border-radius: 999px; font-weight: 200; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.30); } .desktop-main-nav__link--active:hover { color: #000; background-size: 0; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .desktop-main-nav__item--has-dropdown { position: static; } .nav-mega-dropdown { position: fixed; top: 0; left: 0; width: 100vw; background: #fff; padding: 3rem 6.25vw 2.5rem 6.25vw; box-shadow: 0 8px 47px rgba(0, 0, 0, 0.93); border-top: 1px solid rgba(0, 0, 0, 0.06); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0.25s; z-index: 10; pointer-events: none; } .nav-mega-dropdown__title { font-family: inherit; font-size: 1.125rem; font-weight: 500; color: #0d0d0d; margin: 0 0 1.5rem 0; padding: 0; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .nav-mega-dropdown.is-open .nav-mega-dropdown__title { opacity: 1; transform: translateY(0); transition-delay: 0s; } .nav-mega-dropdown__close { position: absolute; top: 2.5rem; right: 6.25vw; background: none; border: none; cursor: pointer; color: #000; opacity: 0.5; transition: opacity 0.2s; z-index: 10; } .nav-mega-dropdown__close:hover { opacity: 1; } .nav-mega-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-mega-dropdown__carousel { position: relative; overflow: hidden; } .nav-mega-dropdown__grid { display: flex; flex-flow: row nowrap; gap: 1.25rem; will-change: transform; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .nav-mega-dropdown__card { flex: 0 0 calc((100% - (4 * 1.25rem)) / 5); min-width: calc((100% - (4 * 1.25rem)) / 5); display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: #0d0d0d; opacity: 0; transform: translateY(120px) scale(0.95); transition: opacity 0.7s ease-out, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-mega-dropdown.is-open .nav-mega-dropdown__card { opacity: 1; transform: translateY(0) scale(1); transition-delay: calc(var(--stagger, 0) * 0.1s); } .nav-mega-dropdown.is-open .nav-mega-dropdown__card:hover { opacity: 1; transition-delay: 0s; transition-duration: 0.2s; } .nav-mega-dropdown__card__image { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; } .nav-mega-dropdown__card__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transition: transform 0.4s ease-out; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .nav-mega-dropdown__card__image--placeholder { background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%); } .nav-mega-dropdown__card__image .eye-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; opacity: 0; transition: opacity 0.25s ease-out; } .nav-mega-dropdown__card__image .eye-overlay svg { color: #fff; width: 1.8rem; height: 1.8rem; } .nav-mega-dropdown__card__image .eye-overlay span { color: #fff; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; } .nav-mega-dropdown__card__image:hover img { transform: scale(1.05); } .nav-mega-dropdown__card__image:hover .eye-overlay { opacity: 1; } .nav-mega-dropdown__card__body { display: flex; flex-direction: column; gap: 0.15rem; } .nav-mega-dropdown__card__body strong { font-size: 0.875rem; font-weight: 200; color: #0d0d0d; } .nav-mega-dropdown__card__body span { font-size: 0.8rem; color: #999; font-weight: 200; } .nav-mega-dropdown__card__desc { font-size: 0.725rem; color: #666; line-height: 1.35; margin: 0.25rem 0 0 0; display: block; overflow: visible; font-weight: 200; } .nav-mega-dropdown__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; box-shadow: none; border: 2px solid #ef6c26; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease; color: #ef6c26; } .nav-mega-dropdown__arrow--prev { left: -0.5rem; } .nav-mega-dropdown__arrow--next { right: -0.5rem; } .nav-mega-dropdown__arrow:hover { background: #ef6c26; box-shadow: none; transform: translateY(-50%) scale(1.06); color: #fff; } .nav-mega-dropdown__arrow:active { transform: translateY(-50%) scale(0.96); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .nav-mega-dropdown__arrow.is-visible { opacity: 1; pointer-events: auto; } } @media only screen and (min-width: 64em) { .page-header, .main-layout, .wireframes, .btn-container { padding-left: 6.25vw !important; padding-right: 6.25vw !important; } } .nav-mega-dropdown__card__image { background: transparent !important; } .nav-mega-dropdown__card.is-active .nav-mega-dropdown__card__image { outline: none !important; box-shadow: none !important; } .nav-mega-dropdown__card.is-active .nav-mega-dropdown__card__image img { opacity: 0.4 !important; } .nav-mega-dropdown__card.is-active .nav-mega-dropdown__card__image .eye-overlay { opacity: 1 !important; } .nav-mega-dropdown__card.is-active .nav-mega-dropdown__card__body strong { color: #ef6c26; font-weight: 500; } .nav-mega-dropdown__card:not(.is-active) .nav-mega-dropdown__card__image:hover img { opacity: 0.4 !important; } .nav-mega-dropdown__card:not(.is-active) .nav-mega-dropdown__card__image:hover .eye-overlay { opacity: 1 !important; } .home-hero-h1 { font-size: clamp(1.8rem, 2.5vw, 4.2rem) !important; font-weight: 300 !important; line-height: 1 !important; color: #1a1a1a !important; letter-spacing: -0.01em !important; } .home-hero-p { font-size: clamp(1rem, 1.15vw, 1.35rem) !important; color: #444 !important; margin-top: 24px !important; line-height: 1.55 !important; font-weight: 300 !important; max-width: none !important; } .home-hero-title { max-width: none !important; display: inline-block !important; } @media only screen and (min-width: 64em) { .main-header__content { padding: 4rem 0 0 0 !important; } } .template-home .main-header__content__title:first-child { padding-top: 0rem !important; padding-bottom: 0 !important; } .template-home .branch { height: 471px !important; } @media only screen and (min-width: 64em) { .main-branches { display: flex !important; flex-flow: row nowrap !important; margin-top: 3rem !important; margin-bottom: 3rem !important; gap: 1px !important; width: 100% !important; overflow: hidden !important; background-color: #fff !important; height: 471px !important; } .main-branches__item { flex: 1 1 33.3333% !important; width: 33.3333% !important; height: 100% !important; overflow: hidden !important; position: relative !important; transition: flex 0.6s cubic-bezier(0.25, 1, 0.3, 1), width 0.6s cubic-bezier(0.25, 1, 0.3, 1) !important; } .main-branches:hover .main-branches__item { flex: 0.7 1 22% !important; width: 22% !important; } .main-branches__item:hover { flex: 1.5 1 56% !important; width: 56% !important; } .branch::after { content: "" !important; position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.15) !important; transition: background 0.6s cubic-bezier(0.25, 1, 0.3, 1) !important; pointer-events: none !important; z-index: 2 !important; } .main-branches:hover .branch::after { background: rgba(0, 0, 0, 0.35) !important; } .main-branches__item:hover { flex: 1.5 1 56% !important; width: 56% !important; } .main-branches__item:hover .branch__background__image { transform: scale(1.05) !important; } .branch__background__image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), filter 0.4s ease !important; transform: scale(1) !important; cursor: default !important; } .template-home .branch { height: 100% !important; padding: 4rem 4.125vw 4rem 4.25vw !important; } } .page-about .branch__title h2 { font-size: 1.6rem !important; font-weight: 300 !important; margin-top: 1.05rem !important; color: #fff !important; }