@charset "UTF-8";

/* Article Teaser */

.article-teaser {
   height: 100%;
   min-width: 0;
   max-width: 100%;
}

.article-teaser-inner {
   display: grid;
   grid-template-rows: minmax(4rem, auto) auto 1fr auto auto;
   height: auto;
   min-width: 0;
   max-width: 100%;
}

.article-teaser-header,
.ad-teaser-header {
   display: flex;
   align-items: flex-end;
}

.article-teaser-title {
   font-size: var(--font-size-35);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1;
   letter-spacing: 0.003em;
   text-align: left;
   color: var(--a11y-color-text, #000000);

   display: block;
   padding: 0 0 0.5rem 1rem;
}

.article-teaser--large.article-teaser--media-slider .article-teaser-title,
.article-teaser--large.article-teaser--media-image .article-teaser-title {
   font-family: var(--font-family-TimesNewRomanNarrow);
   font-size: var(--font-size-88);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1;
   letter-spacing: normal;
   text-align: center;
   color: inherit;
}

.article-teaser--large.article-teaser--media-video .article-teaser-title {
   font-size: var(--font-size-88);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1;
   letter-spacing: normal;
   text-align: center;
   color: inherit;
}

.article-teaser--large .article-teaser-header:has(+.article-teaser-text),
.article-teaser--large .article-teaser-header:has(+.article-teaser-cta) {
   margin-bottom: 1rem;
}

.article-teaser-title a {
   color: inherit;
}

.article-teaser-link {
   display: block;
   width: 100%;
   height: 100%;
   min-width: 0;
   max-width: 100%;
}

.article-media-meta-wrapper {
   width: 100%;
   max-width: 100%;
   min-width: 0;
   position: relative;
   min-height: 3.2rem;
   --teaser-meta-fg: #000000;
   --teaser-meta-bg: transparent;
   background-color: var(--teaser-meta-bg);
   overflow: hidden;
}

.article-teaser-media {
   width: 100%;
   height: 100%;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
}

.article-teaser-media-list {
   width: 100%;
   min-width: 0;
   max-width: 100%;
}

.article-teaser-media-item {
   width: 100%;
   min-width: 0;
   max-width: 100%;
}

.article-teaser-swiper,
.article-teaser-swiper-wrapper,
.article-teaser-swiper-slide {
   width: 100%;
   min-width: 0;
   max-width: 100%;
}

.article-teaser-swiper {
   height: 100%;
   overflow: hidden;
}

.article-teaser-swiper-wrapper,
.article-teaser-swiper-slide {
   height: 100%;
}

.article-teaser-media--slider,
.article-teaser-media--slider .article-teaser-swiper,
.article-teaser-media--slider .article-teaser-swiper-wrapper,
.article-teaser-media--slider .article-teaser-swiper-slide,
.article-teaser-media--slider picture {
   width: 100%;
   height: 100%;
}

.article-teaser-media--slider picture {
   display: block;
}

.article-teaser-swiper img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   transform: scale(1.01);
   transform-origin: center center;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   will-change: transform, opacity;
}

.article-teaser-video {
   display: block;
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   will-change: transform, opacity;
}

.article-teaser-media--video {
   position: relative;
}

.article-teaser-media--video .reel-timeline--teaser {
   left: 1rem;
   top: auto;
   bottom: 0.8rem;
   width: calc(100% - 2rem);
   height: 1.4rem;
   opacity: 1;
   z-index: 3;
   cursor: default;
   pointer-events: none;
   touch-action: auto;
}

.article-teaser-media--video .reel-timeline--teaser::before,
.article-teaser-media--video .reel-timeline--teaser .reel-timeline-current {
   top: 0.6rem;
   transform: none;
   height: 1.5px;
}


/*
  Meta color matrix (single source of truth):
  data-media-state = has-media | empty
  data-meta-tone   = black | white
  html[data-theme="high-contrast"] + html[data-alt-mode="on"] can invert visible meta text.
*/

.article-teaser-meta {
   position: absolute;
   z-index: 2;

   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 1rem;

   pointer-events: none;

   padding: 0.8rem 1rem;
   color: var(--teaser-meta-fg);
}

.article-media-meta-wrapper[data-media-state="has-media"][data-meta-tone="black"] {
   --teaser-meta-fg: #000000;
}

.article-media-meta-wrapper[data-media-state="has-media"][data-meta-tone="white"] {
   --teaser-meta-fg: #FFFFFF;
}

.article-media-meta-wrapper[data-media-state="has-media"] {
   aspect-ratio: var(--teaser-media-ratio);
}

.article-media-meta-wrapper[data-teaser-size="large"] {
   aspect-ratio: 16 / 9;
}

/* .article-media-meta-wrapper[data-media-state="empty"] { */
.article-media-meta-wrapper {
   --teaser-meta-bg: #000000;
}

.article-media-meta-wrapper[data-media-state="empty"][data-teaser-size="large"] {
   aspect-ratio: 16 / 9;
}

.article-media-meta-wrapper[data-media-state="empty"]:not([data-teaser-size="large"]) {
   aspect-ratio: 1 / 1;
}

.article-media-meta-wrapper[data-meta-tone="black"] {
   --teaser-meta-fg: #FFFFFF;
}

.article-media-meta-wrapper[data-meta-tone="white"] {
   --teaser-meta-fg: #000000;
}

html[data-theme="high-contrast"] .article-media-meta-wrapper {
   --teaser-meta-bg: #FFFFFF;
   --teaser-meta-fg: #000000;
}

/*
   Keep teaser-on-media tone settings stable in high-contrast.
   Only alt-mode specific overrides should change this behavior.
*/
html[data-theme="high-contrast"]:not([data-alt-mode="on"]) .article-media-meta-wrapper[data-media-state="has-media"][data-meta-tone="black"] {
   --teaser-meta-fg: #000000;
}

html[data-theme="high-contrast"]:not([data-alt-mode="on"]) .article-media-meta-wrapper[data-media-state="has-media"][data-meta-tone="white"] {
   --teaser-meta-fg: #FFFFFF;
}

.article-footer-wrapper {
   padding: 1rem;
}

.article-teaser-tags {
   display: flex;
   gap: 0 1rem;
   flex-wrap: wrap;
}

.article-teaser__tags {
   display: flex;
   gap: 0 1rem;
   flex-wrap: wrap;
}

.article-teaser-tags a,
.article-teaser-date {
   font-size: var(--font-size-15);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.2;
   letter-spacing: 0.013em;
   text-align: left;
   color: inherit;

   pointer-events: auto;
}

.article-teaser__date {
   font-size: var(--font-size-15);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.2;
   letter-spacing: 0.013em;
   text-align: left;
   color: inherit;
   pointer-events: auto;
}

.article-teaser-meta a,
.article-teaser-meta .article-teaser-tags,
.article-teaser-meta .article-teaser-tags li,
.article-teaser-meta .article-teaser-tags a,
.article-teaser-meta .article-teaser-date {
   color: inherit;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content {
   position: absolute;
   inset: 0;
   z-index: 2;
   align-content: center;
   text-align: center;
   padding: 0;
   color: var(--teaser-meta-fg);
   pointer-events: none;
   row-gap: 1.5rem;

   padding: 1rem;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-header {
   justify-content: center;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-title {
   padding: 0;
   text-align: center;
   color: inherit;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-title a {
   color: inherit;
   pointer-events: auto;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-text,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-text a {
   margin: 0;
   text-align: center;
   color: inherit;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-cta {
   margin: 0;
   text-align: center;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-overlay-content .article-teaser-cta a {
   color: inherit;
   pointer-events: auto;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-media,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-media-list,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-media-item,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-link picture,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-link img,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-link video {
   width: 100%;
   height: 100%;
}

.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-link img,
.article-media-meta-wrapper[data-teaser-size="large"] .article-teaser-link video {
   display: block;
   -o-object-fit: cover;
   object-fit: cover;
}

.article-teaser .article-actions {
   margin: 0 0 1.5rem 0;
   justify-content: flex-start;
}

.article-teaser.article-teaser--large .article-actions {
   margin-bottom: 0;
}

/* Ad Teaser */

.ad-teaser-inner {
   display: grid;
   grid-template-rows: minmax(4rem, auto) auto 1fr auto;
   height: auto;
}

.ad-teaser-media-meta-wrapper {
   width: 100%;
   min-width: 0;
   max-width: 100%;
}

.ad-teaser-media,
.ad-teaser-image-link,
.ad-teaser-image {
   width: 100%;
   height: auto;
}

.ad-teaser-image-link {
   display: block;
}

.ad-teaser-image {
   display: block;
   -o-object-fit: cover;
   object-fit: cover;
}

.ad-teaser-title {
   font-size: var(--font-size-15);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.2;
   letter-spacing: 0.013em;
   text-align: left;
   color: var(--a11y-color-text, #000000);

   display: inline-block;
   padding: 0 0 0.6rem 1rem;
}

/* Article Teaser & Ad Teaser */
.article-teaser-text,
.ad-teaser-text {
   font-family: var(--font-family-TimesNewRoman);
   font-size: var(--font-size-17);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.41;
   letter-spacing: normal;
   text-align: left;
   color: var(--a11y-color-text, #000000);

   margin: 1.5rem 0 1.5rem 0;
}

.ad-teaser-title a,
.article-teaser-text a,
.ad-teaser-text a {
   color: var(--a11y-color-text, #000000);
}

.ad-teaser-text {
   margin: 0;
}

.article-teaser-cta,
.ad-teaser-cta {
   margin-top: 1.5rem
}

.article-teaser-cta a,
.ad-teaser-cta a {
   font-size: var(--font-size-15);
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.2;
   letter-spacing: 0.013em;
   text-align: left;
   color: var(--a11y-color-text, #000000);
}


@media screen and (max-width: 50em) {

   /* 800px */
   .article-media-meta-wrapper[data-teaser-size="large"] {
      aspect-ratio: 9 / 16;
   }

   .article-teaser--large.article-teaser--media-video .article-teaser-title {
      font-size: var(--font-size-88);
   }

   .article-teaser--large .article-teaser-header:has(+.article-teaser-text), .article-teaser--large .article-teaser-header:has(+.article-teaser-cta) {
      margin-bottom: 0;
   }

}