/* ================================================================
   Grundlegende Einstellungen
   ================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}


/* ================================================================
   Timeline-Grundgerüst und vertikale Linie
   ================================================================ */

.wf-timeline {
  --line-width: 3px;
  --timeline-progress: 0%;
  --item-color: var(--wf-color3);

  position: relative;
  display: grid;
  gap: 3rem;
  margin: 0;
  padding: 0 1rem;
  list-style: none;
}

/* Dezente Grundlinie für noch nicht erreichte Einträge. */
.wf-timeline::before {
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--line-width);
  border-radius: 99px;
  background: rgb(64 73 67 / 22%);
  content: "";
  transform: translateX(-50%);
}

/* Farbige Fortschrittslinie; die Höhe wird per JavaScript gesetzt. */
.wf-timeline::after {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 50%;
  width: var(--line-width);
  height: var(--timeline-progress);
  border-radius: 99px;
  background: var(--wf-color3);
  content: "";
  transform: translateX(-50%);
  transition: height .12s linear;
}


/* ================================================================
   Einzelne Timeline-Einträge
   ================================================================ */

.wf-timeline-item {
  --icon-shift: 0px;

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(4rem, 8vw, 7rem);
}


/* ================================================================
   Dekorative SVG-Grafiken
   ================================================================ */

.wf-timeline-decoration {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 75%;
  width: calc((100% - clamp(4rem, 8vw, 7rem)) / 2);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, calc(-50% + var(--icon-shift)));
  transition:
    transform .7s cubic-bezier(.22, .61, .36, 1),
    opacity .35s ease;
}

/* Bei rechten Karten steht die Dekoration auf der linken Seite. */
.wf-timeline-item:nth-child(even) .wf-timeline-decoration {
  left: 25%;
}


/* ================================================================
   Kalenderpunkt auf der Mittellinie
   ================================================================ */

.wf-timeline-marker {
  position: absolute;
  z-index: 2;
  top: 2rem;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  border-radius: 50%;
  color: var(--wf-color1);
  background: var(--wf-color3);
    background: color-mix(in srgb, var(--item-color) 22%, var(--wf-color8));

  font-size: 40px;
  line-height:1.2em;
  transform: translateX(-50%);
  transition:
    background-color .35s ease,
    transform .35s ease;
}

/* Vollfarbiger Punkt, sobald er beim Scrollen erreicht wurde. */
.wf-timeline-item.is-reached .wf-timeline-marker {
  background: var(--item-color);
  transform: translateX(-50%) scale(1.06);
}


/* ================================================================
   Inhaltskarten und Richtungspfeile
   ================================================================ */

.wf-timeline-card {
  position: relative;
  grid-column: 1;
  border: 1px solid rgb(48 55 70 / 6%);
  border-radius: .25rem;
  background: #fff;
box-shadow: 0px 0px 30px -5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 30px -5px rgba(0, 0, 0, 0.3);
}

.wf-timeline-item:nth-child(even) .wf-timeline-card {
  grid-column: 2;
}

.wf-timeline-card::after {
  position: absolute;
  top: 2.45rem;
  right: -1rem;
  width: 1.9rem;
  height: 1.9rem;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}

.wf-timeline-item:nth-child(even) .wf-timeline-card::after {
  right: auto;
  left: -1rem;
  transform: rotate(180deg);
}


/* ================================================================
   Auf- und Zuklappschalter
   ================================================================ */

.wf-timeline-toggle {
  width: 100%;
  padding: 1.5rem 1.6rem .8rem;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wf-timeline-toggle:focus-visible {
  border-radius: .65rem;
  outline: .2rem solid var(--item-color);
  outline-offset: .2rem;
}

.wf-timeline-time {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .6rem;
  color: #616a64;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .035em;
}

.wf-timeline-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--wf-second-font-family);
  letter-spacing:0.04em;
  color: var(--wf-color6);
  font-size: clamp(28px, calc(1.5vw + 0.75rem), 32px);
  font-weight: 800;
  line-height: 1.2;
}

/* Pfeil zeigt den aktuellen Zustand der Karte an. */
.wf-timeline-title::after {
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  border-right: 2px solid var(--item-color);
  border-bottom: 2px solid var(--item-color);
  content: "";
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.wf-timeline-toggle[aria-expanded="true"] .wf-timeline-title::after {
  transform: rotate(225deg);
}


/* ================================================================
   Auf- und zuklappbarer Karteninhalt
   ================================================================ */

.wf-timeline-detail {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows .3s ease,
    opacity .3s ease;
}

.wf-timeline-detail > .wf-timeline-detail-body {
  min-height: 0;
  margin: 0;
  padding: 0 1.6rem 1.6rem;
  overflow: hidden;
  font-size: clamp(14px, calc(1.5vw + 0.75rem), 15px);
  line-height: 1.4;
}

.wf-timeline-detail[hidden] {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}


/* ================================================================
   Mobile Darstellung
   ================================================================ */

@media (max-width: 47.99em) {
  .wf-timeline {
    gap: 2rem;
    padding-left: 2.9rem;
  }

  .wf-timeline::before,
  .wf-timeline::after {
    left: 1.3rem;
    transform: none;
  }

  .wf-timeline-item {
    display: block;
  }

  .wf-timeline-marker {
    top: 1.65rem;
    left: -1.6rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 27px;
    transform: translateX(-50%);
  }

  .wf-timeline-item.is-reached .wf-timeline-marker {
    transform: translateX(-50%) scale(1.06);
  }

  .wf-timeline-card,
  .wf-timeline-item:nth-child(even) .wf-timeline-card {
    grid-column: auto;
  }

  .wf-timeline-card::after,
  .wf-timeline-item:nth-child(even) .wf-timeline-card::after {
    top: 1.9rem;
    right: auto;
    left: -.85rem;
    width: 1.6rem;
    height: 1.6rem;
    transform: rotate(180deg);
  }

  /* Große Dekorationen auf kleinen Bildschirmen ausblenden. */
  .wf-timeline-decoration {
    display: none;
  }
}


/* ================================================================
   Barrierefreiheit: reduzierte Bewegung
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .wf-timeline *,
  .wf-timeline *::before,
  .wf-timeline *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .wf-timeline-decoration {
    transform: translate(-50%, -50%);
  }
}