/*
Theme Name: Kinderbüro Timeline
Description: A custom font theme for Togger Timeline. Customize fonts here.
================================================== */
:root {
  --tl-font-base: var(--wp--preset--font-family--roboto);
  --tl-font-headline: var(--wp--preset--font-family--merriweather);
  --link-color: #1a89a8;
  --accent-color-default: #1a89a8;
  --accent-color-light: #f8d74e;
  --accent-color-orange: #FF8552;
  --accent-color-purple: #CA8ADB;
}
/*	Font Base
----------------------------------------------------- */
.tl-timeline {
  font-family: var(--tl-font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3em;
}

.tl-timeline h2,
.tl-timeline h3,
.tl-timeline h4,
.tl-timeline h5,
.tl-timeline h6 {
  font-family: var(--tl-font-headline) !important;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.2em;
  text-shadow: none !important;
}

.tl-timeline .tl-text-headline-container h2.tl-headline {
  font-size: 28px !important;
}
.tl-timeline p {
  font-family: var(--tl-font-base);
  font-size: 16px;
  line-height: 1.3em;
  font-weight: 300 !important;
}
.tl-timeline ul {
  font-family: var(--tl-font-base);
}
.tl-timeline .tl-media .tl-media-wikipedia h4 a,
.tl-timeline .tl-media h4,
.tl-timeline .tl-media h4 a {
  font-family: var(--tl-font-base) !important;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}
.tl-timeline .tl-caption,
.tl-timeline .tl-credit {
  font-family: var(--tl-font-base) !important;
  font-size: 15px;
  font-weight: 300;
}
.tl-timeline .vcard {
  font-family: var(--tl-font-base) !important;
  font-weight: normal !important;
}
.tl-timeline .tl-slidenav-next,
.tl-timeline .tl-slidenav-previous,
.tl-timeline .tl-message,
.tl-timeline .tl-timegroup-message {
  font-family: var(--tl-font-base) !important;
  font-weight: 700;
  text-transform: uppercase;
}
.tl-timeline .tl-slidenav-next .tl-slidenav-title,
.tl-timeline .tl-slidenav-previous .tl-slidenav-title,
.tl-timeline .tl-message .tl-slidenav-title,
.tl-timeline .tl-timegroup-message .tl-slidenav-title {
  line-height: 1.3em !important;
}
.tl-timeline .tl-headline-date,
.tl-timeline h3.tl-headline-date {
  font-family: var(--tl-font-base) !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
.tl-timeline .tl-headline-date small,
.tl-timeline h3.tl-headline-date small {
  font-family: var(--tl-font-base) !important;
  font-weight: normal !important;
}
.tl-timeline .tl-timenav-slider {
  font-family: var(--tl-font-base) !important;
  font-weight: 700;
}
.tl-timeline .tl-timenav-slider h2.tl-headline {
  font-family: var(--tl-font-base) !important;
  font-weight: 700;
  text-transform: none;
}
.tl-timeline .tl-timenav-slider .tl-timeaxis {
  font-family: var(--tl-font-base) !important;
  font-weight: 700;
  text-transform: uppercase;
}
.tl-timeline .tl-menubar {
  font-family: var(--tl-font-base) !important;
}
.tl-timeline blockquote,
.tl-timeline blockquote p {
  font-family: var(--tl-font-base) !important;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}
input[type="text"].editor-headline {
  font-family: var(--tl-font-base) !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 46px;
  line-height: 46px;
}
.tl-timeline .tl-timenav-slider .tl-timeaxis {
  font-weight: normal;
}

/** overwrire *.less **/
.tl-slidenav-previous .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-title {
  filter: alpha(opacity=50);
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  letter-spacing: 0.05em;
}
.tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-icon, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-icon, .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-title, .tl-slidenav-previous .tl-slidenav-content-container .tl-slidenav-description, .tl-slidenav-next .tl-slidenav-content-container .tl-slidenav-description {
  text-shadow: none !important;
  line-height: 1.2em;
  letter-spacing: 0.05em;
}

.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline, 
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline p {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 12px;
  height: 100%;
  overflow: hidden;
  font-weight: normal;
  margin: 0;
  color: #666;
  position: relative;
}
.tl-slidenav-previous {
  text-align: left;
  left: 0;
  margin-left: 20px;
}
.tl-slidenav-next {
  text-align: right;
  margin-right: 20px;
  right: 0;
}
/** read more link **/
.tl-slide .read-more-link:after {
      content: "\e649";
      /**
       * Custom icon font family for timeline components
       * 
       * @font-family tl-icons
       * @description Applies a custom icon font named 'tl-icons' to timeline elements.
       * This font family should be defined via @font-face rule elsewhere in the stylesheet.
       * 
       * @note Verify that the 'tl-icons' font files are properly loaded and the @font-face
       * declaration exists before this rule is applied to avoid font fallback issues.
       */
      font-family: 'tl-icons';
      margin-left: 5px;
}
.tl-slide .tl-read-more-wrapper{
  text-align: right;
  margin-top: 15px;
}
.tl-slide .tl-read-more-wrapper a {
  text-decoration: none;
  color: var(--link-color);
}

.tl-media-shadow {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 3px;
}