
.amds-teaser {
  position: relative;
  &:hover {
    cursor: default;
  }
  &--secondary {
    background-color: @text-color;

  }
}

.amds-teaser-background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.amds-teaser-background-overlay {
  &::after, &::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s ease-out;
  }

  // wenn hover
  &::after {
    opacity: 0;
    .amds-teaser--primary & {
      .linear-brand-gradient(@text-color);
    }

    .amds-teaser--secondary & {
      .linear-brand-gradient();
    }
  }

  //normal
  &::before {
    opacity: 1;
    .amds-teaser--primary & {
      .linear-brand-gradient();
    }

    .amds-teaser--secondary & {
      .linear-brand-gradient(@text-color);
    }
  }
}

.amds-teaser-link {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  .amds-teaser:hover & .amds-teaser-background-overlay::after {
    opacity: 1;
  }
  .amds-teaser:hover & .amds-teaser-background-overlay::before {
    opacity: 0;
  }

}

.amds-teaser-background-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;

  &.is-lowres {
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      display: none;
    }

  }
  &.is-hires {
    display: none;
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      display: block;
    }

  }

}

.amds-teaser-content {
  position: relative;

  .unitize-padding(32, 16);
  @media (min-width: @tabletViewportWidth) {
    .unitize-padding(32, 32);
  }

  @media (min-width: @desktopViewportWidth) {
    .unitize-padding(48, 32);
  }

  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  h1, h2, h3, h4 {
    margin-top: 0;

    .head--smaller {
      font-weight: 400;
    }
  }

  h1 {
    line-height: 1.1 !important;
    @media (max-width: @tabletViewportWidth) {
      font-size: 30px;
    }
  }

  a:not(.btn) {
    color: #fff;
  }
  .btn, span {
    text-shadow: none;

  }
  .btn {
    white-space: nowrap;
    border: 0 none;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }
}

.teaser--text-offcanvas {
  .offcanvas--content {
    * {
      color: @text-color !important;
      text-shadow: none;
    }
    .content--title {
      font-family: @font-headline-stack;
      //font-size: ~'calc(2em + 6 * ((100vw - 600px) / (1000)))';
    }
  }
}

.teaser--text-long {
  display: none;
  @media (min-width: @tabletViewportWidth) {
    display: inherit;
  }
}

.amds-teaser--secondary {
  h1, h2, h3, h4, p {
    color: #fff;
  }
  .amds-teaser-link:hover .btn {

    &, &:focus, &:hover {
      background-color: @btn-primary-text-color;
      color: @btn-primary-hover-bg
    }
  }
}

.amds-teaser--hero {

  .amds-teaser--secondary();


  @media (min-width: @tabletLandscapeViewportWidth) and (orientation: landscape) {
    height: unit(35, vw);
  }

  @media (max-width: (@phoneLandscapeViewportWidth - 0.0625)) and (orientation: portrait) {
    min-height: inherit;
    height: inherit;
    max-height: inherit;

  }

  .amds-teaser-content {
    .container();

    @media (min-width: @phoneLandscapeViewportWidth) {
      //padding-right: 200px;
    }
    @media (min-width: @tabletLandscapeViewportWidth) {
      top: 40%;
      transform: translateY(-40%);
      transform-origin: 0 50%;
      padding-right: 300px;
      padding-left: 0;
    }
    @media (min-width: @desktopViewportWidth) {
      padding-right: 400px;
      transform: translateY(-40%) scale(1.1);
    }
    @media (min-width: 1441px) {
      padding-right: 600px;
      transform: translateY(-40%) scale(1.2);
    }
    @media (min-width: 1920px) {
      padding-right: 700px;
      transform: translateY(-40%) scale(1.5);
    }
  }

  .amds-teaser-background-image {
    overflow: hidden;
    img {
      position: absolute;
      right: 0;
      max-width: inherit;
      max-height: inherit;
      height: 100%;
      width: auto;
      //@media (max-width: (@phoneLandscapeViewportWidth - 0.0625)) and (orientation: portrait) {
      //  transform: translateX(25%);
      //}
    }
  }

}

.amds-teaser--category {
  .amds-teaser-content {
    padding: 0 0 0 0;
    @media (min-width: @desktopViewportWidth) {
      padding: 0 30% 0 0;
      min-height: 400px;
    }
    h1, h2, h3, h4, p {
      color: #fff;
    }

    a.btn {
      background-color: @btn-primary-text-color;
      color: @btn-primary-hover-bg;
      border: 0 none;
      &:focus, &:hover {
        color: @text-color-dark;
      }
    }
  }
}

.amds-teaser--simple {
  h1, h2, h3, h4, p {
    color: inherit;
  }
  * {
    text-shadow: none;
  }
  display: flex;

  .amds-teaser-image {
    &:extend(.amds-teaser-content);
    padding-left: 1em;
    padding-right: 0;
    @media (min-width: @phoneLandscapeViewportWidth) {
      padding-left: 0;
    }
    flex: 1 0 auto;
    img {
      width: 80px;
      @media (min-width: @phoneLandscapeViewportWidth) {
        width: 200px;
      }
      @media (min-width: @tabletViewportWidth) {
        width: 150px;
      }
    }
  }

}

