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


/* 2026-10-06 (Meldung Macher): Lange Woerter in Timeline-Ueberschriften
   (z. B. GRUENDUNGSGESCHAEFTSFUEHRER, HOCHDRUCKEXTRAKTION) wurden in DE
   abgeschnitten. Fix: Silbentrennung (lang=de/en am <html>) + Umbruch-Fallback
   + etwas kleinere Headline. Gilt nur fuer Slide-Ueberschriften, nicht Zeitleiste. */
.tl-timeline .tl-slide .tl-headline,
.tl-timeline .tl-slide .tl-headline a {
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphenate-limit-chars: 8 4 4;
}
.tl-timeline .tl-slide h2.tl-headline {
  font-size: clamp(1.45rem, 2.6vw, 2.4rem) !important;
  line-height: 1.12 !important;
}
.tl-timeline .tl-slide .tl-text-content {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}