.dm-teaser {
  position: relative;
  background: var(--teaserBGColor);
  border-top: var(--horizontalRuleHeight) solid var(--brandColor);
  padding-top: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  content-visibility: auto;
  contain-intrinsic-size: 313px;
}

.dm-teaser__info {
  display: var(--displayTeaserInfo);
  justify-content: space-between;
  margin: 0 var(--mobileMargin) 1rem var(--mobileMargin);
}


.dm-teaser__headline {
  font-family: var(--headlineFont);
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 var(--mobileMargin) 1.5rem var(--mobileMargin);
}

.dm-teaser__headline .dm-teaser__overlayLink {
  color: var(--mainTextColor);
}

.dm-teaser__headline strong {
  color: var(--brandColor);
}

.dm-paragraph--teaser {
  margin-left: var(--mobileMargin);
  margin-right: var(--mobileMargin);
}



/* Size: breakpoint-M */
@media (min-width: 768px) {

  .dm-teaser {
    contain-intrinsic-size: 537px;
  }

  .dm-teaser--flatDesign {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    box-shadow: none;
  }

  .dm-teaser__headline,
  .dm-paragraph--teaser,
  .dm-teaser__info {
    margin-left: 2rem;
    margin-right: 2rem;
  }

}

/* ==========================================================================
    The following expands the headline-link to cover the whole area of the
    teaser. Other links inside the teaser are z-indexed on top.
    The "Mehr…"-link is hidden. It's for screenreaders only.
    concept: https://www.sarasoueidan.com/blog/nested-links/
   ========================================================================== */

/* Elevate links up. We don't have classes for these links, since this is Li-Editor content. */
.dm-teaser a {
  position: relative;
  z-index: 1;
}

.dm-teaser .dm-teaser__overlayLink {
  position: static;
}

.dm-teaser__overlayLink:before {
  /* expand the pseudo-element to cover the teaser area */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.dm-teaser__more {
  visibility: hidden;
}

@media (min-width: 768px) {
 .dm-teaser__headline {
  font-size: 2rem;
 }
}