/* 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;
}


/* P9 (2026-07-29): Bei schmaleren Viewports Bild+Text der Timeline-Slides
   frueher UNTEREINANDER statt nebeneinander -> verhindert Overlap.
   Bootstrap-xl-Grenze; ueberschreibt die JS-Inline-Styles von TimelineJS. */
@media (max-width: 1200px) {
  .tl-timeline .tl-slide .tl-slide-content-container {
    display: block !important;
  }
  .tl-timeline .tl-slide .tl-slide-media,
  .tl-timeline .tl-slide .tl-slide-content {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  .tl-timeline .tl-slide .tl-slide-media {
    margin: 0 auto 1rem !important;
    text-align: center !important;
  }
  .tl-timeline .tl-slide .tl-media img {
    max-height: 40vh !important;
    width: auto !important;
    object-fit: contain !important;
  }
}