/**
 * Divi Meilensteine – vertikale Timeline
 */

.dm-meilensteine {
  --dm-axis-color: #ffffff;
  --dm-axis-width: 4px;
  --dm-branch-length: 60px;
  --dm-year-color: #4a4a4a;
  --dm-text-color: #4a4a4a;
  --dm-year-size: 28px;
  --dm-text-size: 14px;
  --dm-item-spacing: 48px;
  --dm-axis-extend: 32px;
  --dm-content-max: min(42vw, 320px);

  position: relative;
  width: 100%;
  padding: 2rem 1.5rem 3rem;
  box-sizing: border-box;
}

.dm-meilensteine__title {
  margin: 0 0 2.5rem;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-year-color);
}

.dm-meilensteine__timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  min-height: 120px;
  padding-top: var(--dm-axis-extend);
  padding-bottom: var(--dm-axis-extend);
}

.dm-meilensteine__axis {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--dm-axis-width);
  background: var(--dm-axis-color);
  transform: translateX(-50%);
  z-index: 0;
}

.dm-meilensteine__axis-cap {
  position: absolute;
  left: 50%;
  width: calc(var(--dm-axis-width) * 2.5);
  height: calc(var(--dm-axis-width) * 2.5);
  transform: translateX(-50%) rotate(45deg);
  background: var(--dm-axis-color);
}

.dm-meilensteine__axis-cap--top {
  top: 0;
}

.dm-meilensteine__axis-cap--bottom {
  bottom: 0;
}

.dm-meilensteine--terminal-circle .dm-meilensteine__axis-cap {
  border-radius: 50%;
  transform: translateX(-50%);
}

.dm-meilensteine--terminal-none .dm-meilensteine__axis-cap {
  display: none;
}

.dm-meilensteine__items {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--dm-item-spacing);
  z-index: 1;
}

.dm-meilensteine__item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2.5rem;
}

.dm-meilensteine__item-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--dm-content-max);
}

.dm-meilensteine__item--left .dm-meilensteine__item-inner {
  grid-column: 1;
  justify-self: end;
  flex-direction: row;
  text-align: right;
}

.dm-meilensteine__item--right .dm-meilensteine__item-inner {
  grid-column: 3;
  justify-self: start;
  flex-direction: row;
  text-align: left;
}

.dm-meilensteine__item--left .dm-meilensteine__text {
  order: 1;
}

.dm-meilensteine__item--left .dm-meilensteine__year {
  order: 2;
  flex-shrink: 0;
}

.dm-meilensteine__item--left .dm-meilensteine__branch {
  order: 3;
}

.dm-meilensteine__item--right .dm-meilensteine__branch {
  order: 1;
}

.dm-meilensteine__item--right .dm-meilensteine__year {
  order: 2;
  flex-shrink: 0;
}

.dm-meilensteine__item--right .dm-meilensteine__text {
  order: 3;
}

.dm-meilensteine__year {
  font-size: var(--dm-year-size);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dm-year-color);
}

.dm-meilensteine__text {
  margin: 0;
  font-size: var(--dm-text-size);
  font-weight: 400;
  line-height: 1.45;
  color: var(--dm-text-color);
}

.dm-meilensteine__branch {
  display: block;
  width: var(--dm-branch-length);
  height: var(--dm-axis-width);
  background: var(--dm-axis-color);
  flex-shrink: 0;
}

.dm-meilensteine__empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  opacity: 0.7;
}

/* Alle Einträge links */
.dm-meilensteine--left .dm-meilensteine__item--left .dm-meilensteine__item-inner,
.dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__item-inner {
  grid-column: 1;
  justify-self: end;
  flex-direction: row;
  text-align: right;
}

.dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__text {
  order: 1;
}

.dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__year {
  order: 2;
}

.dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__branch {
  order: 3;
}

/* Alle Einträge rechts */
.dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__item-inner,
.dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__item-inner {
  grid-column: 3;
  justify-self: start;
  flex-direction: row;
  text-align: left;
}

.dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__branch,
.dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__branch {
  order: 1;
}

.dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__year,
.dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__year {
  order: 2;
}

.dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__text,
.dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__text {
  order: 3;
}

/* Builder-Vorschau */
.dm-meilensteine--preview {
  pointer-events: none;
}

/* Mobile: Achse links, alle Einträge rechts */
@media (max-width: 767px) {
  .dm-meilensteine {
    --dm-content-max: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dm-meilensteine__timeline {
    grid-template-columns: auto 1fr;
    padding-top: var(--dm-axis-extend);
    padding-bottom: var(--dm-axis-extend);
  }

  .dm-meilensteine__axis {
    left: calc(0.5rem + var(--dm-axis-width) / 2);
    transform: translateX(-50%);
  }

  .dm-meilensteine__item {
    grid-template-columns: auto 1fr;
  }

  .dm-meilensteine__item--left .dm-meilensteine__item-inner,
  .dm-meilensteine__item--right .dm-meilensteine__item-inner,
  .dm-meilensteine--left .dm-meilensteine__item--left .dm-meilensteine__item-inner,
  .dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__item-inner,
  .dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__item-inner,
  .dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__item-inner {
    grid-column: 2;
    justify-self: start;
    flex-direction: row;
    text-align: left;
    max-width: 100%;
  }

  .dm-meilensteine__item--left .dm-meilensteine__branch,
  .dm-meilensteine__item--right .dm-meilensteine__branch,
  .dm-meilensteine--left .dm-meilensteine__item--left .dm-meilensteine__branch,
  .dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__branch,
  .dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__branch,
  .dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__branch {
    order: 1;
    width: min(var(--dm-branch-length), 32px);
  }

  .dm-meilensteine__item--left .dm-meilensteine__year,
  .dm-meilensteine__item--right .dm-meilensteine__year,
  .dm-meilensteine--left .dm-meilensteine__item--left .dm-meilensteine__year,
  .dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__year,
  .dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__year,
  .dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__year {
    order: 2;
  }

  .dm-meilensteine__item--left .dm-meilensteine__text,
  .dm-meilensteine__item--right .dm-meilensteine__text,
  .dm-meilensteine--left .dm-meilensteine__item--left .dm-meilensteine__text,
  .dm-meilensteine--left .dm-meilensteine__item--right .dm-meilensteine__text,
  .dm-meilensteine--right .dm-meilensteine__item--left .dm-meilensteine__text,
  .dm-meilensteine--right .dm-meilensteine__item--right .dm-meilensteine__text {
    order: 3;
  }
}