/* Site tweaks on top of the Webflow export (kept separate so the export CSS stays untouched). */

/* nav: same width as the page content, links next to the logo (Technology is gone) */
@media (min-width: 992px) {
  .nav_menu-wrapper { margin-left: 3.5rem; margin-right: auto; }
}

/* home: "Enter the Circle" flush left with the content below */
.section_home_scroll .padding-section-large > h2 { text-align: left; }

/* home: image left (smaller, parallax), "Your Idea" / "Your Solution" right - the text column ends level with the photo */
@media (min-width: 992px) {
  .home_scroll_component { grid-template-columns: minmax(20rem, 1fr) 29.5rem; grid-column-gap: 6rem; grid-row-gap: 0; align-items: stretch; padding-bottom: 0; }
  .home_scroll_visual { position: relative; top: auto; height: auto; min-height: 28rem; display: block; }
  .home_scroll_image-wrapper { position: absolute; inset: 0; width: 100%; height: auto; max-height: none; border-radius: 2rem; overflow: hidden; }
  .home_scroll_image-item { opacity: 1 !important; border-radius: 0; }
  .home_scroll_content { display: flex; flex-direction: column; justify-content: space-between; gap: 3.5rem; padding: 0; }
  .home_scroll_content-item { opacity: 1; min-height: 0; padding: 0; display: block; }
  .home_scroll_text-wrapper { max-width: none; width: 100%; }
  .section_home_scroll .padding-section-large { padding-bottom: 6rem; }
  .section_home_scroll .padding-bottom.padding-xlarge { padding-bottom: 2.5rem; }
}
.par-img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.home_scroll_image-item.par-img { height: 120%; top: -10%; bottom: auto; object-position: 50% 55%; }
@media (max-width: 991px) { .home_scroll_mobile { display: flex; flex-direction: column; gap: 2rem; } }
.home_scroll_mobile-image { position: relative; height: 18rem; border-radius: 1.5rem; overflow: hidden; }
.home_scroll_mobile .home_scroll_text-wrapper { width: 100%; }

/* tighter vertical rhythm on desktop - the export left a lot of empty black/white above headings */
@media (min-width: 992px) {
  .subhero_content { min-height: 24rem; padding-top: 7rem; }
  .padding-section-large { padding-top: 8rem; padding-bottom: 8rem; }
  .padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
  .section_home_scroll .padding-section-large { padding-top: 9rem; }
}

/* round design language: pill buttons and options, softer image corners */
.button, .button-4, .form_radio-2, .nav_menu_cta .button { border-radius: 360rem; }
.home_scroll_image-item, .global_slider_item-image, .global_slider_item-image.is-team, .global_member_image,
.global_member_image img, .footer_cta_component { border-radius: 2rem; overflow: hidden; }

/* home now starts with the scroll section - keep its heading clear of the (absolute) nav on tablet/phone */
@media (max-width: 991px) {
  .section_home_scroll .padding-section-large { padding-top: 8.5rem; }
}

/* ---- language switch (nav) ---- */
.lang-switch { position: relative; display: inline-flex; align-items: center; flex: none; padding: .25rem; margin-right: .75rem;
  border-radius: 360rem; border: 1px solid rgba(255, 255, 255, .24); color: #fff; }
.lang-switch::before { content: ""; position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem);
  border-radius: 360rem; background: #fff; transition: transform .4s cubic-bezier(.65, 0, .35, 1); }
.lang-switch[data-lang="en"]::before { transform: translateX(100%); }
.lang-switch button { position: relative; z-index: 1; appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
  min-width: 2.9rem; padding: .5rem .5rem; border-radius: 360rem; font: inherit; font-size: .95rem; line-height: 1; letter-spacing: .02em;
  color: inherit; text-align: center; transition: color .3s; }
.lang-switch button[aria-pressed="true"] { color: #111; }
.nav_dark .lang-switch { border-color: rgba(0, 0, 0, .2); color: #111; }
.nav_dark .lang-switch::before { background: #111; }
.nav_dark .lang-switch button[aria-pressed="true"] { color: #fff; }
.lang-switch.is-mobile { display: none; margin: 0 0 1.25rem; }
@media (max-width: 991px) {
  .lang-switch.hide-tablet { display: none; }
  .lang-switch.is-mobile { display: inline-flex; }
}
html.i18n-wait body { visibility: hidden; }
body { transition: opacity .25s ease; }
html.i18n-swap body { opacity: 0; }

/* ---- soft page changes: cross-document view transition (+ JS fade fallback in site.js) ----
   the old page lifts away and softens, the new one rises into place; the nav stays put */
@view-transition { navigation: auto; }
.nav_component { view-transition-name: site-nav; }
::view-transition-group(root) { animation-duration: .7s; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-fill-mode: both; }
::view-transition-old(root) { animation: vt-out .38s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .75s cubic-bezier(.16, 1, .3, 1) .08s both; }
::view-transition-group(site-nav) { animation-duration: .2s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px) scale(.992); filter: blur(5px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(26px) scale(1.006); filter: blur(7px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* browsers without cross-document view transitions: fade out on click (site.js), fade in on arrival */
@keyframes page-in { from { opacity: 0; } }
html.no-vt body { animation: page-in .55s cubic-bezier(.16, 1, .3, 1) backwards; }
html.is-leaving body { opacity: 0; transition: opacity .3s ease; }

/* ---- home ---- */
.section_home_scroll .padding-section-large { padding-top: 7.5rem; }
.section_home_scroll .padding-section-large > div[style] { max-width: 48rem !important; }
.section_home_member .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
.global_member_grid.is-split { grid-template-columns: 1fr; grid-column-gap: 5rem; grid-row-gap: 3rem; align-items: center; }
.global_member_item.is-image .global_member_image { height: 26rem; }
.global_member_image img.is-decision { object-position: 35% 50%; }
.block-wrap .block-head { font-size: 4rem; }
.block-wrap { display: grid; width: fit-content; max-width: 100%; }
.block-wrap .member_copy { width: 0; min-width: 100%; max-width: none; text-align: justify; }
@media (min-width: 992px) {
  .global_member_grid.is-split { grid-template-columns: 5fr 6fr; }
}

/* ---- about ---- */
.section_about_team { padding-top: 6rem; padding-bottom: 8rem; }
.about_story_grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.about_story_head, .about_story_team, .about_story_text { min-width: 0; }
.about_story_head h2 { margin: 0; }
.section_about_team .swiper-wrapper { display: flex; }
.section_about_team .swiper-slide.is-global-slider { position: relative; width: 19.5rem; margin-right: 3rem !important; flex: none; }
.section_about_team .global_slider_item-image.is-team { position: relative; overflow: hidden; height: auto; aspect-ratio: 3 / 4; }
.section_about_team .par-img { object-position: 50% 6%; }
.team_name { position: absolute; top: 100%; left: 0; padding-top: 1rem; white-space: nowrap; }
.about_story_text { display: flex; flex-direction: column; padding: 0; }
@media (min-width: 992px) {
  .about_story_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6rem; row-gap: 2.5rem; }
  .about_story_head { grid-column: 1; grid-row: 1; }
  .about_story_team { grid-column: 1; grid-row: 2; }
  /* column 2 shares the two rows of the left column: heading centred on the "United by" lockup, copy starting level with the portrait tops */
  .about_story_text { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; padding-top: 0; }
  .about_story_text > h2 { align-self: center; }
  .about_story_copy { align-self: start; display: flex; flex-direction: column; gap: 1.75rem; }
  .about_story_copy > .spacer-medium { display: none; }
  .about_story_copy > .text-color-grey { font-size: 1.25rem; max-width: 28rem; margin-top: -.55rem; }
  .about_story_copy > .text-align-left { font-size: 1.375rem; line-height: 1.5; }
  .about_story_head h2, .about_story_text h2 { font-size: 3.5rem; }
}
@media (max-width: 767px) {
  .section_about_team .swiper-slide.is-global-slider { width: 12.5rem; margin-right: 1.25rem !important; }
  .section_about_team { padding-bottom: 6rem; }
}
.section_about_member .padding-section-large { padding-top: 2rem; padding-bottom: 6rem; }
.section_about_member .global_member_grid { align-items: stretch; }
.section_about_member .global_member_item { align-items: stretch; }
.section_about_member .global_member_item:last-child .spacer-xlarge { padding-top: 1rem; }
.section_about_member .global_member_item:last-child h2 { margin: 0; }
@media (min-width: 992px) {
  .section_about_member .global_member_item:first-child .spacer-xlarge { padding-top: 2rem; }
  .section_about_member .global_member_item:first-child .global_member_image { flex: 1 1 auto; height: auto; min-height: 16rem; }
  /* the network block rides up so its heading sits on the Martin / Laurenz names row; the photo grows by the same amount and keeps its bottom edge */
  .section_about_member .global_member_item:last-child { margin-top: -8.9rem; }
  .section_about_member .global_member_item:last-child .global_member_image { height: calc(38rem + 8.9rem); }
  .section_about_member .global_member_item:first-child .button { align-self: flex-start; }
}

/* two-line heading as a lockup: the short first line is set larger so both lines run equally wide */
.hl-pair { line-height: 1.1; }
.hl-1, .hl-2 { white-space: nowrap; }
.hl-1 { font-size: 1.6em; letter-spacing: -.01em; } /* fit.js sets the exact size */
.par-img.is-soft { top: -5%; height: 110%; }

/* headings set as a block: both lines the same width, the full stop hangs outside */
.block-head { width: fit-content; text-align: justify; text-align-last: justify; }
.dot-out { display: inline-block; width: 0; overflow: visible; text-align-last: left; }

/* ---- contact: faces centred over the text ---- */
.contact_form_item.is-02 { text-align: center; }
.contact_form_thumbnail-wrapper { justify-content: center; }
.contact_form_item.is-02 .heading-style-h5 { text-align: center; }

/* ---- footer ---- */
.footer_nav .padding-huge { padding-top: 4.5rem; padding-bottom: .5rem; }
.footer_nav_copy { color: var(--black--500); }
@media (min-width: 992px) {
  .footer_nav_grid { grid-template-columns: 1.3fr 1fr 1.3fr 1.5fr; grid-column-gap: 2rem; grid-row-gap: 3.5rem; padding-bottom: 2rem; }
  .footer_nav_grid > .footer_nav_item { grid-area: auto !important; }
  .footer_nav_grid > .footer_nav_item.is-legal { grid-column: 1 / -1 !important; flex-direction: row; justify-content: space-between; align-items: center;
    padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer_nav_grid .button-group { flex-direction: column; align-items: flex-end; }
  .footer_nav_grid > .footer_nav_item:nth-child(4) { align-items: flex-end; }
  .footer_nav_legal-wrapper { width: auto; justify-content: flex-end; }
}
@media (max-width: 991px) {
  .footer_nav_copy { display: none; }
}

/* footer CTA: claim next to a smaller picture */
@media (min-width: 992px) {
  .footer_cta_image { min-width: 46rem; }
}

/* body copy: even edges - hyphenate (lang is set on <html>) and avoid ragged last lines */
.text-color-grey, .home_scroll_text-wrapper div, .about_story_text div, .member_copy { text-wrap: pretty; }
html[lang="de"] :is(.text-color-grey, .home_scroll_text-wrapper div, .about_story_text div, .member_copy) { hyphens: auto; }
/* home body copy as blocks (not on phones, where the columns are too narrow) */
@media (min-width: 768px) {
  .home_scroll_text-wrapper .text-color-grey, .section_home_scroll .padding-section-large > div[style] { text-align: justify !important; hyphens: auto; }
  html[lang] .section_home_scroll .padding-section-large > div[style] { hyphens: manual; }
}
/* the German "Wir erwecken Konzepte / zum Leben." heading stays ragged, only the English one is a block */
html[lang="de"] .block-head.is-ragged-de { text-align: left; text-align-last: left; width: auto; }

/* phone / tablet: headings left-aligned and smaller, names under the portraits get their own room */
@media (max-width: 991px) {
  .about_story_team { padding-bottom: 4.5rem; }
}
@media (max-width: 767px) {
  .block-head { text-align: left; text-align-last: left; width: auto; }
  .block-wrap .block-head { font-size: 2.25rem; }
  .block-wrap .member_copy { text-align: left; }
  .subhero_content .heading-style-h2 { font-size: 2rem; }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .section_about_team .swiper-slide.is-global-slider { width: 15rem; margin-right: 2rem !important; }
}

/* hero: room for the first row incl. the group thumbnail */
.subhero_item .max-width-medium { max-width: 44rem; }
.subhero_item.is-left { display: block; width: 100%; }
@media (max-width: 767px) { .about_story_head h2 { font-size: 2.25rem; } .about_story_text h2 { font-size: 2rem; } }
.subhero_grid { grid-template-columns: minmax(0, 1fr); }

/* ---- sub-page heroes: one rhythm - nav bar -> title -> black edge -> next heading all sit the same distance apart (4rem, measured to the glyphs) ---- */
.contact_form_thumbnail.is-02 { margin-left: -.9rem; }
.contact_form_item.is-02 .heading-style-h5 { text-wrap: balance; }
/* desktop: the contact card (faces, heading, buttons) is one narrow column riding up so the faces sit 2/3 in the black hero, 1/3 in the white */
@media (min-width: 992px) {
  .contact_form_thumbnail { width: 6.5rem; height: 6.5rem; }
  /* form as wide as its interest row (Investments ... Project), the card sits right next to it */
  .contact_form_grid { grid-template-columns: 49.6rem 20rem; column-gap: 6rem; justify-content: start; }
  html[lang="de"] .contact_form_grid { grid-template-columns: 48rem 20rem; }
  .contact_form_item.is-02 { width: 20rem; max-width: 100%; justify-self: start; margin-top: -9.4rem; }
}
@media (min-width: 992px) {
  .subhero_content { min-height: 0; padding-top: 9.1rem; }
  .subhero_content .padding-bottom.padding-xlarge { padding-bottom: 3.15rem; }
  .section_about_team { padding-top: 3rem; }
  /* nav links as a pill group with the current page lit; sits with the language switch / call button on the right */
  .nav_content { position: relative; }
  .nav_content > .lang-switch.hide-tablet { margin-left: auto; }
  .nav_menu-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: .3rem; gap: .2rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: 360rem; align-items: center; }
  .nav_menu-wrapper .button.is-nav { height: auto; min-height: 0; margin: 0; padding: .8rem 1.5rem; border-radius: 360rem; font-size: 1.1rem; line-height: 1; transition: background-color .35s cubic-bezier(.65, 0, .35, 1), color .35s; }
  .nav_menu-wrapper .button.is-nav:hover { background-color: rgba(255, 255, 255, .14); }
  .nav_menu-wrapper .button.is-nav.w--current { background-color: #fff; color: #111; }
  .nav_menu-wrapper .button.is-nav.w--current { view-transition-name: nav-active; }
}
::view-transition-group(nav-active) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }

.nav_home-pill { display: none !important; }
@media (min-width: 992px) {
  .nav_menu-wrapper .nav_home-pill { display: inline-flex !important; align-items: center; justify-content: center; padding: .8rem 1.1rem; }
  .nav_home-pill svg { display: block; width: 2.1rem; height: auto; }
  .about_story_copy > .text-align-left { text-align: justify; hyphens: auto; }
}
.about_story_copy > .text-align-left { text-align: justify; hyphens: auto; }
@media (max-width: 991px) { .section_about_team { padding-bottom: 3.5rem; } }
.about_story_text > h2 { text-wrap: balance; }
html[lang="en"] .about_story_copy > .text-align-left { hyphens: manual; }

/* home: intro, scroll row and "Let's bring your concept to life" row share one grid - photo column 1fr, text column 29.5rem */
@media (min-width: 992px) {
  .section_home_scroll .padding-section-large > div.intro-fit[style] { max-width: calc(100% - 35.5rem) !important; min-width: 20rem; }
  .intro-l1 { display: block; white-space: nowrap; text-align-last: justify; }
  .section_home_scroll .padding-section-large > div.intro-fit[style] { text-align: left !important; text-wrap: balance; hyphens: manual; }
  .global_member_grid.is-split { grid-template-columns: minmax(20rem, 1fr) 29.5rem; grid-column-gap: 6rem; }
  .section_home_member .global_member_item.is-copy { align-items: flex-start; text-align: left; }
  .section_home_member .block-wrap { width: 100%; }
  .section_home_member .block-wrap .block-head { font-size: 3.7rem; }
  .section_home_member .global_member_item.is-image .global_member_image { height: 28rem; }
}
@media (min-width: 992px) { html[lang="de"] .section_home_member .block-wrap .block-head { font-size: 3.3rem; } }