/**

 * Divi Meilensteine – vertikale Timeline

 */



.dm-meilensteine {

  --dm-axis-color: #ffffff;

  --dm-axis-width: 4px;

  --dm-branch-length: 60px;

  --dm-item-spacing: 48px;

  --dm-axis-extend: 32px;

  --dm-content-max: 420px;



  position: relative;

  width: 100%;

  padding: 2rem 1.5rem 3rem;

  box-sizing: border-box;

}



.dm-meilensteine__title {

  margin: 0 0 2.5rem;

}



.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__items > .dm_meilenstein_item,

.dm-meilensteine__items > .et_pb_module {

  display: contents;

}



.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);

}



/* Standard: Eintrag rechts (Zweig → Jahr → Text) */

.dm-meilensteine__item .dm-meilensteine__item-inner {

  grid-column: 3;

  justify-self: start;

  flex-direction: row;

  text-align: left;

}



.dm-meilensteine__item .dm-meilensteine__branch {

  order: 1;

}



.dm-meilensteine__item .dm-meilensteine__year {

  order: 2;

}



.dm-meilensteine__item .dm-meilensteine__text {

  order: 3;

}



/* Zickzack: ungerade Einträge links */

.dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__item-inner {

  grid-column: 1;

  justify-self: end;

  flex-direction: row;

  text-align: right;

}



.dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__text {

  order: 1;

}



.dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__year {

  order: 2;

}



.dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__branch {

  order: 3;

}



/* Alle Einträge links */

.dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__item-inner {

  grid-column: 1;

  justify-self: end;

  flex-direction: row;

  text-align: right;

}



.dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__text {

  order: 1;

}



.dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__year {

  order: 2;

}



.dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__branch {

  order: 3;

}



.dm-meilensteine__year {

  flex-shrink: 0;

}



.dm-meilensteine__text {

  margin: 0;

}



.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 rechts */

.dm-meilensteine--right .dm-meilensteine__items > * .dm-meilensteine__item-inner {

  grid-column: 3;

  justify-self: start;

  flex-direction: row;

  text-align: left;

}



.dm-meilensteine--right .dm-meilensteine__items > * .dm-meilensteine__branch {

  order: 1;

}



.dm-meilensteine--right .dm-meilensteine__items > * .dm-meilensteine__year {

  order: 2;

}



.dm-meilensteine--right .dm-meilensteine__items > * .dm-meilensteine__text {

  order: 3;

}



/* Builder-Vorschau: Inline-Bearbeitung erlauben */

.dm-meilensteine--preview .dm-meilensteine__title,

.dm-meilensteine--preview .dm-meilensteine__year,

.dm-meilensteine--preview .dm-meilensteine__text {

  pointer-events: auto;

}



.dm-meilensteine--preview .dm-meilensteine__branch,

.dm-meilensteine--preview .dm-meilensteine__axis {

  pointer-events: none;

}



/* Scroll-Animation (Frontend) – nur wenn JS aktiv ist */

html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__title {

  opacity: 0;

  transform: translateY(16px);

  transition:

    opacity 0.55s ease,

    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

}



html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--animate-in .dm-meilensteine__title {

  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.05s;

}



html.dm-js-animate .dm-meilensteine--scroll-animate:not(.dm-meilensteine--animate-in) .dm-meilensteine__axis {

  transform: translateX(-50%) scaleY(0);

  transform-origin: top center;

}



html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--animate-in .dm-meilensteine__axis {

  transform: translateX(-50%) scaleY(1);

  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

}



html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__axis-cap {

  opacity: 0;

  transition: opacity 0.35s ease;

}



html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--animate-in .dm-meilensteine__axis-cap--top {

  opacity: 1;

  transition-delay: 0.05s;

}



html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--animate-in .dm-meilensteine__axis-cap--bottom {

  opacity: 1;

  transition-delay: 0.75s;

}



html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__branch {

  transform: scaleX(0);

  transform-origin: left center;

  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: calc(var(--dm-item-index, 0) * 60ms);

}



html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__item.is-visible .dm-meilensteine__branch {

  transform: scaleX(1);

}



html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--zigzag

  .dm-meilensteine__items

  > *:nth-child(odd)

  .dm-meilensteine__branch,

html.dm-js-animate .dm-meilensteine--scroll-animate.dm-meilensteine--left .dm-meilensteine__branch {

  transform-origin: right center;

}



html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__year,

html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__text {

  opacity: 0;

  transform: translateY(12px);

  transition:

    opacity 0.5s ease,

    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: calc(0.18s + var(--dm-item-index, 0) * 60ms);

}



html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__item.is-visible .dm-meilensteine__year,

html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__item.is-visible .dm-meilensteine__text {

  opacity: 1;

  transform: translateY(0);

}



@media (prefers-reduced-motion: reduce) {

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__title,

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__axis,

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__axis-cap,

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__branch,

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__year,

  html.dm-js-animate .dm-meilensteine--scroll-animate .dm-meilensteine__text {

    opacity: 1;

    transform: none;

    transition: 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__items > * .dm-meilensteine__item-inner,

  .dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__item-inner,

  .dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__item-inner {

    grid-column: 2;

    justify-self: start;

    flex-direction: row;

    text-align: left;

    max-width: 100%;

  }



  .dm-meilensteine__items > * .dm-meilensteine__branch,

  .dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__branch,

  .dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__branch {

    order: 1;

    width: min(var(--dm-branch-length), 32px);

  }



  .dm-meilensteine__items > * .dm-meilensteine__year,

  .dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__year,

  .dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__year {

    order: 2;

  }



  .dm-meilensteine__items > * .dm-meilensteine__text,

  .dm-meilensteine--zigzag .dm-meilensteine__items > *:nth-child(odd) .dm-meilensteine__text,

  .dm-meilensteine--left .dm-meilensteine__items > * .dm-meilensteine__text {

    order: 3;

  }

}