/* stylelint-disable selector-class-pattern */
* {
  font-synthesis: none !important;
  box-sizing: border-box;
}

.skiplinks {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacings-component-top-padding-a);
}

.skiplink {
  position: relative;
  top: -200px;
  left: 0.5rem;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: var(--colors-surface);
  color: var(--colors-primary);
  font: var(--font-preset-body-2);
  text-decoration: underline;
  border-radius: var(--border-radius-component-border-radius-b);
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  white-space: nowrap;
  transition: top 0.4s ease;
  z-index: 1;
  width: fit-content;
}

.skiplink:focus {
  top: 0.5rem; /* 8px - distance from top when focused */
  outline: 2px solid var(--colors-primary);
  outline-offset: 2px;
}

.skiplink:hover {
  color: var(--colors-primary-hover);
  text-decoration: underline;
}

.skiplink:active {
  color: var(--colors-primary-pressed);
}

#main:focus,
#main:focus:not(:focus-visible),
#footer:focus,
#footer:focus:not(:focus-visible) {
  outline: none;
}

:root {
  --full-template-columns: [start] calc(var(--side-margin) - var(--col-gutter))
    repeat(var(--col-number), [col-start] 1fr [col-end]) calc(var(--side-margin) - var(--col-gutter)) [end];
  --inner-template-columns: repeat(var(--col-number), [col-start] 1fr [col-end]);
  --col-width: max(
    calc((100vw - (2 * var(--side-margin)) - ((var(--col-number) - 1) * var(--col-gutter))) / var(--col-number)),
    calc((var(--page-max-content-width) - ((var(--col-number) - 1) * var(--col-gutter))) / var(--col-number))
  );
  --navigation-height-desktop: 50px;
  --navigation-height-tablet: 32px;
  --navigation-height-mobile: 24px;
}

body {
  margin: 0;
  display: none;
  min-height: 100vh;
  min-width: 320px;
  background-color: var(--colors-surface-page-background);
}

body.appear {
  display: grid;
  grid-template-columns: var(--full-template-columns);
  gap: 0 var(--col-gutter);
  font: var(--font-preset-body-1);
}

main {
  display: contents;
}

article:not(.article-text__item) {
  display: contents;
}

footer,
header {
  grid-column: start / end;
}

.section {
  grid-column: col-start / col-end var(--col-number);
  display: grid;
  grid-template-columns: subgrid;
}

.section > * {
  grid-column: span var(--col-number);
}

.fragment > div[class$='-wrapper'] {
  grid-column: span var(--col-number);
}

.section:not(.navigation-container, .breadcrumb-container, :empty, :last-child) {
  margin-bottom: var(--spacings-page-spacing-sections);
}

.section:not(.navigation-container, .breadcrumb-container) > div[class$='-wrapper']:not(:last-child) {
  margin-bottom: var(--spacings-page-spacing-elements-inside-section);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

h1 {
  font: var(--font-preset-heading-1);
}

h2 {
  font: var(--font-preset-heading-2);
}

h3 {
  font: var(--font-preset-heading-3);
}

h4 {
  font: var(--font-preset-heading-4);
}

h5 {
  font: var(--font-preset-heading-5);
}

h6 {
  font: var(--font-preset-heading-6);
}

p {
  font: var(--font-preset-body-2);
}

ul,
ol {
  font: var(--font-preset-body-2);

  .accordion &,
  .table &,
  .features-slider &,
  .content-block-group &,
  .content-embed & {
    margin: revert;
    padding: revert;
    margin-bottom: 1rem;
  }
}

a {
  font: var(--font-preset-body-2);
  color: var(--colors-primary);

  &:hover {
    color: var(--colors-primary-pressed);
  }
}

em {
  font: var(--font-preset-body-2);
  font-style: italic;
}

u {
  font: var(--font-preset-body-2);
}

sup {
  font: var(--font-preset-body-2);
}

sub {
  font: var(--font-preset-body-2);
}

pre {
  font: var(--font-preset-body-2);
}

.hidden {
  display: none;
}

.full-width-background {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 100%;
  z-index: -1;
}

.section-with-title__block-wrappers .text-wrapper:not(:last-of-type) {
  margin-bottom: var(--spacings-page-spacing-elements-inside-section);
}

@media only screen and (width >= 672px) and (width <= 1055px) {
  .is-centered {
    grid-column: col-start / col-end var(--col-number);
  }

  .skiplinks {
    height: calc(var(--navigation-height-tablet) + var(--header-padding-top) + var(--header-padding-bottom));
  }
}

@media only screen and (width <= 671px) {
  .is-centered {
    grid-column: col-start / col-end var(--col-number);
  }

  .skiplinks {
    height: calc(var(--navigation-height-mobile) + var(--header-padding-top) + var(--header-padding-bottom));
  }
}

.section-with-title__block-wrappers > div.content-block-group-wrapper:not(:last-of-type) {
  margin-bottom: var(--spacings-page-spacing-elements-inside-section);
}

@media only screen and (width >= 1056px) and (width <= 1599px) {
  .is-centered {
    grid-column: 4 / 12;

    div[class$='-wrapper'] {
      grid-column: span 8;
    }
  }

  .skiplinks {
    height: calc(var(--navigation-height-desktop) + var(--header-padding-top) + var(--header-padding-bottom));
  }

  .section.section-with-title {
    .section-with-title__content {
      grid-column: span 4;
    }

    .section-with-title__block-wrappers {
      grid-column: span 12;
    }
  }

  .section-with-title:has(> .section-with-title__content) .section-with-title__block-wrappers {
    grid-column: span 8;
  }
}

@media only screen and (width >= 1600px) {
  .is-centered {
    grid-column: 4 / 12;

    div[class$='-wrapper'] {
      grid-column: span 8;
    }
  }

  .skiplinks {
    height: calc(var(--navigation-height-desktop) + var(--header-padding-top) + var(--header-padding-bottom));
  }

  .section.section-with-title {
    .section-with-title__content {
      grid-column: span 4;
    }

    .section-with-title__block-wrappers {
      grid-column: span 12;
    }
  }

  .section-with-title:has(> .section-with-title__content) .section-with-title__block-wrappers {
    grid-column: span 8;
  }
}

.is-fullwidth {
  grid-column: col-start / col-end var(--col-number);
}

.section.section-with-title {
  display: grid;
  grid-template-columns: subgrid;
  gap: var(--row-gutter) var(--col-gutter);

  .section-with-title__content {
    hyphens: auto;

    .section-with-title__content-title {
      font: var(--font-preset-heading-2);
      color: var(--colors-primary);
      margin-bottom: var(--spacings-component-vertical-gap-e);
    }

    .section-with-title__content-text {
      font: var(--font-preset-body-2);
      color: var(--colors-on-surface);
    }
  }
}

.fragment-wrapper,
.fragment {
  grid-column: col-start / col-end var(--col-number);
  display: grid;
  grid-template-columns: subgrid;

  .call-to-action__card,
  .call-to-action__content,
  .call-to-action__description,
  .call-to-action__title,
  .call-to-action {
    grid-column: span var(--col-number);
  }
}