:root {
  --section-column-gap: 28px;
  --section-row-gap: 0;
}

/* Hide empty sections */
main > .section:empty,
main > .section:not(:has(*)) {
  display: none !important;
}

/* stylelint-disable */
main > .section[data-layout] {
  display: flex;
  justify-content: center;
  justify-self: center;
  max-width: 66.875rem;
  padding: 0;
  column-gap: var(--section-column-gap);
  row-gap: var(--section-row-gap);
  flex-wrap: wrap;
  box-sizing: border-box;
}

main > .section[data-layout="100"] {
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

main > .section[data-layout]:not([data-layout="100"]) .block,
main > .section[data-layout]:not([data-layout="100"]) .block > * {
  width: 100%;
}

main > .section[data-layout] > * {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

main > .section[data-layout] *[class*="col-"] {
  display:block;
}

main > .section[data-layout="100"] > [class*="-wrapper"] {
  display: flex;
  justify-content: center;
}

/* 50-50 */
main > .section[data-layout="50-50"] > * {
  flex: 0 1 calc(50% - calc(var(--section-column-gap) / 2));
  max-width: calc(50% - calc(var(--section-column-gap) / 2));
}

/* 33-33-33 */
main > .section[data-layout="33-33-33"] > * {
  flex: 0 1 calc((100% - 2 * var(--section-column-gap)) / 3);
  max-width: calc((100% - 2 * var(--section-column-gap)) / 3);
}


/* 66-33 */
main > .section[data-layout="66-33"] > *:nth-child(odd) {
  flex: 0 1 calc(66% - calc(var(--section-column-gap) / 2));
  max-width: calc(66% - calc(var(--section-column-gap) / 2));
}

main > .section[data-layout="66-33"] > *:nth-child(even) {
  flex: 0 1 calc(32.3333333% - calc(var(--section-column-gap) / 2));
  max-width: calc(32.3333333% - calc(var(--section-column-gap) / 2));
}

/* 33-66 */
main > .section[data-layout="33-66"] > *:nth-child(odd) {
  flex: 0 1 calc(32.3333333% - calc(var(--section-column-gap) / 2));
  max-width: calc(32.3333333% - calc(var(--section-column-gap) / 2));
}

main > .section[data-layout="33-66"] > *:nth-child(even) {
  flex: 0 1 calc(66% - calc(var(--section-column-gap) / 2));
  max-width: calc(66% - calc(var(--section-column-gap) / 2));
}

/* 25-25-25-25 */
main > .section[data-layout="25-25-25-25"] > * {
  flex: 0 1 calc(25% - calc(var(--section-column-gap) / 2));
  max-width: calc(25% - calc(var(--section-column-gap) / 2));
}


@media (max-width: 739.98px) {
  main > .section[data-layout] > *,
  main > .section[data-layout] > *:first-child,
  main > .section[data-layout] > *:last-child {
    width: 100%;
    padding: 0;
  }

  main > .section[data-layout] {
    padding-left: 28px;
    padding-right: 28px;
  }

  main > .section[data-layout] > *,
  main > .section[data-layout] > *:nth-child(odd),
  main > .section[data-layout] > *:nth-child(even) {
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  main .teaser-wrapper .teaser-m,
  .accordions-wrapper .accordions,
  .accordions-wrapper .accordions .col-standard,
  .intro-text-wrapper .col-standard,
  main .testimonials-wrapper .testimonial {
    padding: 0;
  }

  main .contact-search.block .search-wrapper .search-header {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .section.teaser-container,
  .logo-show.block .content-grid {
    margin: 0 -14px;
  }

  main .section.teaser-container .teaser-wrapper {
    padding: 14px;
  }

  .logo-show.block {
    margin: 0 -14px;
  }

  .blockquote.block,
  .accordions.block {
    width: 100%;
  }

  .contact-search.block .search-wrapper {
    width: 100%;
  }

  .content-grid > .col-standard h3 {
    width: 100%;
  }

  main > .section[data-layout] {
    column-gap: 0;
    flex-wrap: wrap;
  }
}

.blockquote.block,
.accordions.block {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.blockquote.block .col-standard,
.accordions.block .col-standard,
.default-content-wrapper > *,
.contact-team.block, 
.contact-team-role.block,
.contact-team.block .col-standard,
.contact-team-role.block .col-standard,
.cta-link.block .col-standard {
  width: 100%;
}

.default-content-wrapper {
  flex-wrap: wrap
}

/* default-content-wrapper should have max-width if first child is h-tag */
.default-content-wrapper:has(> h1:first-child),
.default-content-wrapper:has(> h2:first-child),
.default-content-wrapper:has(> h3:first-child),
.default-content-wrapper:has(> h4:first-child),
.default-content-wrapper:has(> h5:first-child),
.default-content-wrapper:has(> h6:first-child) {
  max-width: 100%;
  text-align: center;
  margin-top: 0;
}

/* If default-content-wrapper only has h-tag and is last child in section, reduce bottom spacing */
/* But not if next section is contact-overlay-role-container */
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h1:only-child),
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h2:only-child),
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h3:only-child),
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h4:only-child),
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h5:only-child),
main > .section:not(:has(+ .section.contact-overlay-role-container)) > .default-content-wrapper:last-child:has(> h6:only-child) {
  margin-bottom: -3rem;
}

.intro-text.block {
  width: 100%;
}

.intro-text.block .col-standard {
  margin: 0 auto;
}


.contact-search.block .col-standard {
  width: 100%;
}

.contact-search.block .search-wrapper .search-header {
  width: 66.66666%;
  margin: 0 auto;
}


.content-grid > .col-standard {
  padding: 0;
}

main > .section[data-layout] .contact-search.block *[class*="col-"] {
  display: flex;
  justify-content: center;
}

.content-grid > .col-standard h3 {
  width: 66.666%;
  padding: 0 14px;
}

.contact-person-portrait-details {
  flex-direction: column;
}

.contact-search.block {
  width: 100%;
}

.video-wrapper {
  width: 100%;
}

main > .section[data-layout] .teaser-wrapper *[class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.highlights.block {
  width: 66.66667%;
}

.section.contact-overlay-container.form-container {
  display: flex;
}

.section.contact-overlay-container.form-container > .contact-overlay-wrapper,
.section.contact-overlay-container.form-container > .form-wrapper {
  flex: 1;
}

/* layout and spacing fixes */

main > .section:first-of-type {
  margin-top: 0;
}

.section h2 {
  margin-top: 0;
}

main > .section > div:not(.default-content-wrapper):not(.contact-overlay-wrapper),
main > .section > h1,
main > .section > h2,
main > .section > h3,
main > .section > h4,
main > .section > h5,
main > .section > h6 {
  margin-top: 3rem;
}

/* H-tags get bottom margin for spacing */
main > .section h1,
main > .section h2,
main > .section h3,
main > .section h4,
main > .section h5,
main > .section h6 {
  margin-bottom: 2rem;
}

/* Element directly after h-tag in section should have no top margin */
main > .section > h1 + *,
main > .section > h2 + *,
main > .section > h3 + *,
main > .section > h4 + *,
main > .section > h5 + *,
main > .section > h6 + *,
main > .section > h1 + .teaser-wrapper,
main > .section > h2 + .teaser-wrapper,
main > .section > h3 + .teaser-wrapper,
main > .section > h4 + .teaser-wrapper,
main > .section > h5 + .teaser-wrapper,
main > .section > h6 + .teaser-wrapper {
  margin-top: 0 !important;
}

/* All consecutive teaser-wrappers after h-tag should also have no margin-top */
main > .section > h1 ~ .teaser-wrapper,
main > .section > h2 ~ .teaser-wrapper,
main > .section > h3 ~ .teaser-wrapper,
main > .section > h4 ~ .teaser-wrapper,
main > .section > h5 ~ .teaser-wrapper,
main > .section > h6 ~ .teaser-wrapper {
  margin-top: 0 !important;
}

/* If default-content-wrapper has h-tag, first child of next wrapper gets no margin-top */
main > .section > .default-content-wrapper:has(h1, h2, h3, h4, h5, h6) + * > *:first-child,
main > .section > .default-content-wrapper:has(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}

/* Layout-specific: Multiple elements after h-tag get no margin (desktop only) */
/* 50-50: Next 2 elements */
@media (min-width: 740px) {
  main > .section[data-layout="50-50"] > h1 + * + *,
  main > .section[data-layout="50-50"] > h2 + * + *,
  main > .section[data-layout="50-50"] > h3 + * + *,
  main > .section[data-layout="50-50"] > h4 + * + *,
  main > .section[data-layout="50-50"] > h5 + * + *,
  main > .section[data-layout="50-50"] > h6 + * + * {
    margin-top: 0;
  }

  /* 33-66 and 66-33: Next 2 elements */
  main > .section[data-layout="33-66"] > h1 + * + *,
  main > .section[data-layout="33-66"] > h2 + * + *,
  main > .section[data-layout="33-66"] > h3 + * + *,
  main > .section[data-layout="33-66"] > h4 + * + *,
  main > .section[data-layout="33-66"] > h5 + * + *,
  main > .section[data-layout="33-66"] > h6 + * + *,
  main > .section[data-layout="66-33"] > h1 + * + *,
  main > .section[data-layout="66-33"] > h2 + * + *,
  main > .section[data-layout="66-33"] > h3 + * + *,
  main > .section[data-layout="66-33"] > h4 + * + *,
  main > .section[data-layout="66-33"] > h5 + * + *,
  main > .section[data-layout="66-33"] > h6 + * + * {
    margin-top: 0;
  }

  /* 33-33-33: Next 3 elements */
  main > .section[data-layout="33-33-33"] > h1 + * + * + *,
  main > .section[data-layout="33-33-33"] > h2 + * + * + *,
  main > .section[data-layout="33-33-33"] > h3 + * + * + *,
  main > .section[data-layout="33-33-33"] > h4 + * + * + *,
  main > .section[data-layout="33-33-33"] > h5 + * + * + *,
  main > .section[data-layout="33-33-33"] > h6 + * + * + * {
    margin-top: 0;
  }
}

/* Ensure jumpmark-wrapper is hidden and doesn't affect layout */
main > .section > .jumpmark-wrapper {
  display: none !important;
}

/* First image-wrapper in the first section that has an image-wrapper as first child gets reduced margin */
main > .section:first-of-type > .image-wrapper:first-child {
  margin-top: 1rem;
}

/* Some components get more spacing than default 3rem */
main > .section > .image-wrapper,
main > .section > .table-wrapper,
main > .section > .cta-link-wrapper,
main > .section > .accordions-wrapper {
  margin-top: 5rem;
}

/* Exception: If internal-page-navigation comes before image-container, reduce image-wrapper margin */
main > .section.internal-page-navigation-container + .section.image-container > .image-wrapper {
  margin-top: 3rem;
}

/* If previous section has background-color, remove margin-top from wrappers (but not h-tags or cta-link-wrapper or text-wrapper) */
main > .section[data-background-type="color"]:not([data-color="bg-none"]) + .section > div:not(.cta-link-wrapper):not(.text-wrapper):not(:has(h1, h2, h3, h4, h5, h6)) {
  margin-top: 0;
}

/* Add padding-bottom to sections with background color (not bg-none) */
main > .section[data-background-type="color"]:not([data-color="bg-none"]) {
  padding-bottom: 3rem;
}

/* Add padding-bottom if next section has any background color */
main > .section:has(+ .section[data-background-type="color"]:not([data-color="bg-none"])) {
  padding-bottom: 3rem;
}

/* Also novelties sections if next section has background or is also novelties */
main > .section.novelties-container:has(+ .section[data-background-type="color"]:not([data-color="bg-none"])),
main > .section.novelties-container:has(+ .section.novelties-container) {
  padding-bottom: 3rem;
}

/* 2rem if next section starts with h-tag */
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h1:first-child),
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h2:first-child),
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h3:first-child),
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h4:first-child),
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h5:first-child),
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section > h6:first-child) {
  padding-bottom: 2rem;
}

/* Hide empty text blocks */
.text-wrapper:has(.text.block:empty),
.text-wrapper .text.block:empty {
  display: none;
}

/* Multiple teaser-containers in a row: teaser-wrapper gets no margin-top (only in layout 100 or no layout) */
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"] > .teaser-wrapper,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]) > .teaser-wrapper {
  margin-top: 0;
}

/* Exception: Restore margin-top if previous section had additional wrappers (not just teaser-wrapper) */
/* But NOT if current section has h-tag directly before any wrapper */
main > .section.teaser-container[data-layout="100"]:has(> :not(.teaser-wrapper):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) + .section.teaser-container[data-layout="100"]:not(:has(> h1 + [class*="-wrapper"], > h2 + [class*="-wrapper"], > h3 + [class*="-wrapper"], > h4 + [class*="-wrapper"], > h5 + [class*="-wrapper"], > h6 + [class*="-wrapper"])) > .teaser-wrapper,
main > .section.teaser-container:not([data-layout]):has(> :not(.teaser-wrapper):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) + .section.teaser-container:not([data-layout]):not(:has(> h1 + [class*="-wrapper"], > h2 + [class*="-wrapper"], > h3 + [class*="-wrapper"], > h4 + [class*="-wrapper"], > h5 + [class*="-wrapper"], > h6 + [class*="-wrapper"])) > .teaser-wrapper {
  margin-top: 3rem;
}

/* Teaser-s border management for separate sections (only in layout 100 or no layout) */
/* First teaser-container: border-top + bottom */
main > .section.teaser-container[data-layout="100"]:not(.section.teaser-container + .section.teaser-container) .teaser-s-container,
main > .section.teaser-container:not([data-layout]):not(.section.teaser-container + .section.teaser-container) .teaser-s-container {
  border-top: 1px solid #bfc8ce;
  border-bottom: 1px solid #bfc8ce;
}

/* Following teaser-containers: only border-bottom */
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"] .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]) .teaser-s-container {
  border-top: none;
  border-bottom: 1px solid #bfc8ce;
}

/* Exception: Restore border-top if section has h-tag or multiple different wrappers */
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h1) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h2) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h3) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h4) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h5) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> h6) .teaser-s-container,
main > .section.teaser-container[data-layout="100"] + .section.teaser-container[data-layout="100"]:has(> :not(.teaser-wrapper)) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h1) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h2) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h3) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h4) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h5) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> h6) .teaser-s-container,
main > .section.teaser-container:not([data-layout]) + .section.teaser-container:not([data-layout]):has(> :not(.teaser-wrapper)) .teaser-s-container {
  border-top: 1px solid #bfc8ce;
  border-bottom: 1px solid #bfc8ce;
}

/* Also restore border-top if PREVIOUS section had additional wrappers */
main > .section.teaser-container[data-layout="100"]:has(> :not(.teaser-wrapper):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) + .section.teaser-container[data-layout="100"] .teaser-s-container,
main > .section.teaser-container:not([data-layout]):has(> :not(.teaser-wrapper):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) + .section.teaser-container:not([data-layout]) .teaser-s-container {
  border-top: 1px solid #bfc8ce;
  border-bottom: 1px solid #bfc8ce;
}

/* Multiple teaser sections following each other: no margin-top on second section's wrapper */
.section:has(.teaser-wrapper) + .section:has(.teaser-wrapper) .teaser-wrapper {
  margin-top: 0;
}

.section.teaser-container .teaser-wrapper:first-of-type .teaser-s-container {
  border-top: 1px solid #bfc8ce;
  border-bottom: 1px solid #bfc8ce;
}

.section.teaser-container .teaser-wrapper:not(:first-of-type) .teaser-s-container {
  border-top: none;
  border-bottom: 1px solid #bfc8ce;
}

.category-separator span, .h2, h2 {
  margin-top: 0;
}

/* Fix for section bottom last section spacing to footer */
/* Apply if section has no real background (bg-none counts as no background) */
main > .section:last-child:not([data-background-type="image"]),
main > .section:last-child[data-color="bg-none"] {
  margin-bottom: 5rem;
}

/* Override: Remove margin if section has real background color (not bg-none) */
main > .section:last-child[data-background-type="color"]:not([data-color="bg-none"]) {
  margin-bottom: 0;
}

/* If previous section has background-color (not bg-none), add padding-bottom when last section would get margin-bottom */
main > .section[data-background-type="color"]:not([data-color="bg-none"]):has(+ .section:last-child:not([data-background-type="image"]):not([data-background-type="color"]:not([data-color="bg-none"]))) {
  padding-bottom: 5rem;
}

.sectiion > .cta-link-wrapper {
  margin-bottom: 5rem;
}

.default-content-wrapper {
  margin-top: 0;
}

.default-content-wrapper h1,
.default-content-wrapper h2,
.default-content-wrapper h3,
.default-content-wrapper h4,
.default-content-wrapper h5,
.default-content-wrapper h6 {
  margin: 3rem 0;
}

.section section {
  position: relative;
}
/* Add margin-bottom before novelties section */
.section:has(+ .section.novelties-container) {
  margin-bottom: 3rem;
}

/* Remove top margin when contact-wrapper follows another contact-wrapper */
/* Exception: Keep margin if contact-wrapper has a heading tag as direct child */
main > .section .contact-wrapper + .contact-wrapper:not(:has(> h1, > h2, > h3, > h4, > h5, > h6)),
main > .section .contact-list-wrapper + .contact-list-wrapper:not(:has(> h1, > h2, > h3, > h4, > h5, > h6)) {
  margin-top: 0;
}

/* Contact-person border management for consecutive contact-wrappers */
/* First contact-wrapper: border-top + bottom visible */
main > .section .contact-wrapper:not(.contact-wrapper + .contact-wrapper) .contact-person-portrait-border-top,
main > .section .contact-wrapper:not(.contact-wrapper + .contact-wrapper) .contact-person-portrait-border-bottom {
  opacity: 1;
}

/* Following contact-wrappers: only border-bottom visible (border-top invisible but keeps spacing) */
main > .section .contact-wrapper + .contact-wrapper .contact-person-portrait-border-top {
  opacity: 0 !important;
}

main > .section .contact-wrapper + .contact-wrapper .contact-person-portrait-border-bottom {
  opacity: 1;
}

/* Exception: Restore border-top visibility if contact-wrapper has h-tag as direct child */
main > .section .contact-wrapper + .contact-wrapper:has(> h1) .contact-person-portrait-border-top,
main > .section .contact-wrapper + .contact-wrapper:has(> h2) .contact-person-portrait-border-top,
main > .section .contact-wrapper + .contact-wrapper:has(> h3) .contact-person-portrait-border-top,
main > .section .contact-wrapper + .contact-wrapper:has(> h4) .contact-person-portrait-border-top,
main > .section .contact-wrapper + .contact-wrapper:has(> h5) .contact-person-portrait-border-top,
main > .section .contact-wrapper + .contact-wrapper:has(> h6) .contact-person-portrait-border-top {
  opacity: 1;
}

main > .section.job-detail-container > .job-detail-wrapper:first-of-type {
  margin-top: 0;
}