/* Korrektur Punkt 2 — KnightLab Timeline (.tl-*), nur wo eingebunden */
.tl-timeline .tl-headline-date,
.tl-slide .tl-headline-date {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.tl-slide .tl-slide-content-container .tl-slide-content .tl-text,
.tl-slide-media-only .tl-slide-content-container .tl-slide-content .tl-text {
  font-size: clamp(0.92rem, 1.25vw, 1.05rem) !important;
  line-height: 1.45 !important;
}

.tl-slide .tl-slide-content-container .tl-slide-content {
  padding-left: clamp(1rem, 4vw, 100px);
  padding-right: clamp(1rem, 4vw, 100px);
}

/* DE: Bilder nicht über Text legen / Überläufe begrenzen */
html[lang="de"] .tl-slide .tl-slide-content-container .tl-slide-media {
  max-width: 100%;
  overflow: hidden;
}

html[lang="de"] .tl-media .tl-media-content-container .tl-media-content img,
html[lang="de"] .tl-media .tl-media-content-container .tl-media-content video {
  min-height: 0 !important;
  max-height: min(55vh, 520px) !important;
  width: auto !important;
  object-fit: contain;
}

/* #1008: Timeline-Höhe adaptiv (statt hartem 40em), verhindert zu hohe Box auf Mobile/Desktop.
   Inline-Style height:40em kommt vom views_timelinejs-View-Konfig. !important in ID-Selector gewinnt. */
#timelinejs-timeline-block-1,
div.timelinejs,
.tl-timeline {
  height: clamp(380px, 55vh, 520px) !important;
  min-height: 0 !important;
}

@media (min-width: 992px) {
  #timelinejs-timeline-block-1,
  div.timelinejs,
  .tl-timeline {
    height: clamp(480px, 60vh, 640px) !important;
  }
}

.tl-timeline .tl-storyslider {
  height: calc(100% - 40px) !important;
}