/* ==========================================================================
   VERTICAL TIMELINE COMPONENT (1f8220fe)
   ========================================================================== */

/* Wrapper and Layout Base */
.timeline-wrapper-1f8220fe {
  position: relative;
  width: 100%;
  --line-width: 4px;
  --badge-card-spacing: 30px;
}

.timeline-items-1f8220fe {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Central Timeline Connector Line */
.timeline-line-1f8220fe {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #cbd5e1;
  z-index: 1;
  width: var(--line-width, 4px);
}

.timeline-line-progress-1f8220fe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #6c5ce7;
  transition: height 0.1s ease-out;
}

/* Base item rows */
.timeline-item-1f8220fe {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  transition: all 0.3s ease;
  outline: none;
}

/* Badge (Marker) Wrapper */
.timeline-badge-wrapper-1f8220fe {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}

/* Badge Outer Shape */
.timeline-badge-1f8220fe {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.timeline-badge-text-1f8220fe {
  display: inline-block;
  line-height: 1;
  font-weight: bold;
}

/* Date/Side-Info Outside Container */
.timeline-date-container-1f8220fe {
  position: absolute;
  width: calc(50% - var(--badge-card-spacing));
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. CENTER LAYOUT (ALTERNATING)
   -------------------------------------------------------------------------- */
.timeline-wrapper-1f8220fe.align-center .timeline-line-1f8220fe {
  left: 50%;
  transform: translateX(-50%);
}

.timeline-wrapper-1f8220fe.align-center .timeline-badge-wrapper-1f8220fe {
  left: 50%;
  transform: translateX(-50%);
}

.timeline-wrapper-1f8220fe.align-center .timeline-card-wrapper-1f8220fe {
  width: calc(50% - var(--badge-card-spacing));
}

/* Left-Side Cards (Odd Indexes) -> Date on the Right */
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.odd-1f8220fe {
  flex-direction: row;
}
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.odd-1f8220fe .timeline-card-wrapper-1f8220fe {
  margin-right: auto;
}
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.odd-1f8220fe .timeline-date-container-1f8220fe {
  right: 0;
  justify-content: flex-start;
  padding-left: var(--badge-card-spacing);
}

/* Right-Side Cards (Even Indexes) -> Date on the Left */
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.even-1f8220fe {
  flex-direction: row-reverse;
}
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.even-1f8220fe .timeline-card-wrapper-1f8220fe {
  margin-left: auto;
}
.timeline-wrapper-1f8220fe.align-center .timeline-item-1f8220fe.even-1f8220fe .timeline-date-container-1f8220fe {
  left: 0;
  justify-content: flex-end;
  padding-right: var(--badge-card-spacing);
}

/* --------------------------------------------------------------------------
   2. LEFT LAYOUT (Force content right, date not displayed or absolute)
   -------------------------------------------------------------------------- */
.timeline-wrapper-1f8220fe.align-left .timeline-line-1f8220fe {
  left: 25px;
  transform: translateX(-50%);
}

.timeline-wrapper-1f8220fe.align-left .timeline-badge-wrapper-1f8220fe {
  left: 25px;
  transform: translateX(-50%);
}

.timeline-wrapper-1f8220fe.align-left .timeline-item-1f8220fe {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.timeline-wrapper-1f8220fe.align-left .timeline-card-wrapper-1f8220fe {
  width: calc(100% - 50px - var(--badge-card-spacing));
  margin-left: auto;
}

.timeline-wrapper-1f8220fe.align-left .timeline-date-container-1f8220fe {
  display: none;
}

/* --------------------------------------------------------------------------
   3. RIGHT LAYOUT
   -------------------------------------------------------------------------- */
.timeline-wrapper-1f8220fe.align-right .timeline-line-1f8220fe {
  right: 25px;
  transform: translateX(50%);
}

.timeline-wrapper-1f8220fe.align-right .timeline-badge-wrapper-1f8220fe {
  right: 25px;
  transform: translateX(50%);
}

.timeline-wrapper-1f8220fe.align-right .timeline-item-1f8220fe {
  flex-direction: row;
  justify-content: flex-end;
}

.timeline-wrapper-1f8220fe.align-right .timeline-card-wrapper-1f8220fe {
  width: calc(100% - 50px - var(--badge-card-spacing));
  margin-right: auto;
}

.timeline-wrapper-1f8220fe.align-right .timeline-date-container-1f8220fe {
  display: none;
}

/* --------------------------------------------------------------------------
   INHALTSKARTE (CARD)
   -------------------------------------------------------------------------- */
.timeline-card-1f8220fe {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.3s ease;
}

/* Text alignment: odd cards rechtsbündig, even cards linksbündig */
.timeline-item-1f8220fe:nth-child(odd) .timeline-card-1f8220fe {
  text-align: right;
}
.timeline-item-1f8220fe:nth-child(even) .timeline-card-1f8220fe {
  text-align: left;
}

/* Card arrows positioning */
.timeline-card-arrow-1f8220fe {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background-color: inherit;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

/* Center odd item: arrow points right */
.timeline-wrapper-1f8220fe.align-center .odd-1f8220fe .timeline-card-arrow-1f8220fe {
  right: -6px;
  border-top-color: inherit;
  border-right-color: inherit;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: translateY(-50%) rotate(45deg);
}

/* Center even item: arrow points left */
.timeline-wrapper-1f8220fe.align-center .even-1f8220fe .timeline-card-arrow-1f8220fe {
  left: -6px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: inherit;
  border-left-color: inherit;
  transform: translateY(-50%) rotate(45deg);
}

/* Left alignment item: arrow points left */
.timeline-wrapper-1f8220fe.align-left .timeline-card-arrow-1f8220fe {
  left: -6px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: inherit;
  border-left-color: inherit;
  transform: translateY(-50%) rotate(45deg);
}

/* Right alignment item: arrow points right */
.timeline-wrapper-1f8220fe.align-right .timeline-card-arrow-1f8220fe {
  right: -6px;
  border-top-color: inherit;
  border-right-color: inherit;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: translateY(-50%) rotate(45deg);
}

/* Card inner content typographies */
.timeline-date-1f8220fe {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
}

.timeline-heading-1f8220fe {
  margin: 0 0 12px 0;
  padding: 0;
}

.timeline-desc-1f8220fe {
  margin: 0;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE MOBILE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .timeline-wrapper-1f8220fe {
    --badge-card-spacing: 20px !important;
  }
  .timeline-line-1f8220fe {
    left: 20px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  .timeline-badge-wrapper-1f8220fe {
    left: 20px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
  .timeline-item-1f8220fe {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }
  .timeline-card-wrapper-1f8220fe {
    width: calc(100% - 40px - var(--badge-card-spacing)) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .timeline-card-arrow-1f8220fe {
    left: -6px !important;
    right: auto !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: inherit !important;
    border-left-color: inherit !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }
  .timeline-date-container-1f8220fe {
    position: relative !important;
    flex: 0 0 calc(100% - 40px - var(--badge-card-spacing)) !important;
    width: calc(100% - 40px - var(--badge-card-spacing)) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    justify-content: flex-start !important;
    margin-bottom: 8px;
    order: -1 !important;
  }
}

/* --------------------------------------------------------------------------
   5. TEXT ALIGNMENT UNTER 880PX
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .timeline-item-1f8220fe:nth-child(odd) .timeline-card-1f8220fe,
  .timeline-item-1f8220fe:nth-child(even) .timeline-card-1f8220fe {
    text-align: left !important;
  }
}