/*** Allianz One Breakpoints and Mixins ***/
/*** NDBX One Breakpoints and Mixins ***/
:root {
  --image-max-height: 422px;
  --flexible-teaser-desktop-height: 704px;
  --flexible-teaser-content-min-width: 400px;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-start {
  justify-content: flex-start;
}

.at-teaser {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.at-teaser.at-teaser--reverse {
  margin-top: 32px;
}

@media (min-width: 992px) {
  .at-teaser.at-teaser--reverse {
    flex-direction: row-reverse;
  }
}
@media (min-width: 992px) {
  .at-teaser.at-teaser--flexible {
    position: relative;
    height: var(--flexible-teaser-desktop-height);
  }
  .at-teaser.at-teaser--flexible.at-teaser--reverse .at-teaser__content {
    left: 0;
    width: auto;
    max-width: 60%;
  }
  .at-teaser.at-teaser--flexible .at-teaser__image {
    position: absolute;
    height: 400px;
    width: auto;
    max-width: 90%;
  }
  .at-teaser.at-teaser--flexible .at-teaser__content {
    position: absolute;
    top: 280px;
    left: 198px;
    width: -webkit-fill-available;
    width: -moz-available;
  }
  @supports (hanging-punctuation: none) {
    .at-teaser.at-teaser--flexible .at-teaser__content {
      width: auto;
      min-width: var(--flexible-teaser-content-min-width);
    }
  }
}
@media (min-width: 1280px) {
  .at-teaser.at-teaser--flexible .at-teaser__content {
    top: 200px;
    left: 500px;
  }
}
.at-teaser.at-teaser--genz .at-teaser__image {
  border-top-left-radius: var(--semantic-border-radius-surface-l);
  border-bottom-left-radius: var(--semantic-border-radius-surface-l);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.at-teaser.at-teaser--genz .at-teaser__content {
  border-top-right-radius: var(--semantic-border-radius-surface-l);
  border-bottom-right-radius: var(--semantic-border-radius-surface-l);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: var(--core-color-teal-700);
}

.at-teaser.at-teaser--genz.at-teaser--flexible .at-teaser__image {
  box-shadow: var(--semantic-elevation-100-1-x) var(--semantic-elevation-100-1-y) var(--semantic-elevation-100-1-blur) var(--semantic-elevation-100-1-spread) var(--semantic-elevation-100-1-color);
  box-shadow: var(--semantic-elevation-100-2-x) var(--semantic-elevation-100-2-y) var(--semantic-elevation-100-2-blur) var(--semantic-elevation-100-2-spread) var(--semantic-elevation-100-2-color);
}

.at-teaser.at-teaser--genz.at-teaser--flexible .at-teaser__image, .at-teaser.at-teaser--genz.at-teaser--flexible .at-teaser__content {
  border-radius: var(--semantic-border-radius-surface-l);
}

.at-teaser.at-teaser--genz.at-teaser--reverse .at-teaser__image {
  border-top-right-radius: var(--semantic-border-radius-surface-l);
  border-bottom-right-radius: var(--semantic-border-radius-surface-l);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.at-teaser.at-teaser--genz.at-teaser--reverse .at-teaser__content {
  border-top-left-radius: var(--semantic-border-radius-surface-l);
  border-bottom-left-radius: var(--semantic-border-radius-surface-l);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

@media (max-width: 991px) {
  .at-teaser.at-teaser--genz.at-teaser--reverse .at-teaser__image, .at-teaser.at-teaser--genz.at-teaser--flexible .at-teaser__image,
  .at-teaser.at-teaser--genz .at-teaser__image {
    border-top-right-radius: var(--semantic-border-radius-surface-l);
    border-top-left-radius: var(--semantic-border-radius-surface-l);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .at-teaser.at-teaser--genz.at-teaser--reverse .at-teaser__content, .at-teaser.at-teaser--genz.at-teaser--flexible .at-teaser__content,
  .at-teaser.at-teaser--genz .at-teaser__content {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--semantic-border-radius-surface-l);
    border-bottom-left-radius: var(--semantic-border-radius-surface-l);
  }
}
.at-teaser .button {
  margin: var(--margin-m) 0 0 0;
}

@media (max-width: 991px) {
  .at-teaser .button.button--plain {
    width: initial;
  }
}
@media (max-width: 991px) {
  .at-teaser {
    flex-direction: column;
  }
}
.at-teaser .at-teaser__image {
  position: relative;
  width: 50%;
  height: auto;
  object-fit: cover;
  max-height: var(--image-max-height);
}

@media (max-width: 991px) {
  .at-teaser .at-teaser__image {
    width: 100%;
    max-height: 320px;
  }
}
.at-teaser .at-teaser__content {
  width: 50%;
  height: fit-content;
  background-color: var(--semantic-color-surface-default-resting);
  padding: 24px;
}

.at-teaser .at-teaser__content.theme--inverted .button {
  color: var(--button-contained-secondary-color-resting);
}

.at-teaser .at-teaser__content.theme--emphasis {
  background-color: var(--semantic-color-surface-emphasis-resting);
}

.at-teaser .at-teaser__content.at-teaser__content--attention {
  background-color: var(--semantic-color-surface-default-inverse-resting);
}

@media (min-width: 704px) {
  .at-teaser .at-teaser__content {
    padding: 32px;
  }
}
@media (max-width: 991px) {
  .at-teaser .at-teaser__content {
    width: 100%;
  }
}
.at-teaser .at-teaser__content .heading {
  margin-top: 0;
}

.at-teaser.at-teaser--icon .at-teaser-icon__image {
  position: relative;
  width: 57%;
  height: auto;
  object-fit: cover;
  max-height: 400px;
  border-radius: var(--semantic-border-radius-surface-l);
}

@media (max-width: 991px) {
  .at-teaser.at-teaser--icon .at-teaser-icon__image {
    width: 100%;
    max-height: 320px;
  }
}
.at-teaser.at-teaser--icon .at-teaser-icon__content {
  width: 43%;
}

@media (max-width: 991px) {
  .at-teaser.at-teaser--icon .at-teaser-icon__content {
    width: 100%;
  }
}
.at-teaser.at-teaser--icon .at-teaser-icon__content .at-teaser--social-icon {
  display: flex;
  width: auto;
  height: 240px;
}

@media (max-width: 991px) {
  .at-teaser.at-teaser--icon .at-teaser-icon__content .at-teaser--social-icon {
    display: none;
  }
}
.at-teaser.at-teaser--icon .at-teaser-icon__content .at-teaser--social-left {
  float: right;
  margin-right: 40px;
  margin-bottom: 40px;
}

@media (min-width: 992px) {
  .at-teaser.at-teaser--icon .at-teaser-icon__content h2.heading {
    margin-top: 0;
  }
}
.at-teaser.at-teaser--icon .at-teaser-icon__content-space-left {
  margin-left: 32px;
}

.at-teaser.at-teaser--icon .at-teaser-icon__content-space-right {
  margin-right: 32px;
}