/* assets/css/timeline.css */

.llw-timeline{
  width:100%;
  --llw-accent:#f36b21;   /* Orange (active + Pfeile) */
  --llw-headline:#003A63; /* Headline */
}

/* ===== Scale ===== */
.llw-timeline-scale{
  position:relative;
  margin-bottom:34px;
}

/* Jahre: gleichmäßige Verteilung wie Screenshot */
.llw-timeline-years{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:60px;
  width:100%;
  padding-bottom:34px; /* Platz für Linie */
}

/* Zeitstrahl (Kunde): #FDE9DF */
.llw-timeline-years::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  height:2px;
  background:#FDE9DF;
}

/* Inaktive Jahreszahlen (Kunde): #FDE9DF */
.llw-year{
  position:relative;
  cursor:pointer;
  font-weight:500;
  font-size:16px;
  line-height:1.2;
  color:#FDE9DF;
  white-space:nowrap;
  transition:transform .2s ease, color .2s ease, font-weight .2s ease;
}

/* Hover (Kunde): font-weight 600 */
.llw-year:hover{
  color:rgba(243,107,33,.9);
  font-weight:600;
}

/* Inaktive Bullet-Points (Kunde): #FDE9DF */
.llw-year::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-29px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#FDE9DF;
}

/* Active (bleibt Accent) */
.llw-year.active{
  color:var(--llw-accent);
  font-weight:600;
  transform:scale(1.06);
}

.llw-year.active::after{
  width:14px;
  height:14px;
  background:var(--llw-accent);
  bottom:-29px;
}

/* ===== Pfeile: SVG ===== */
.llw-timeline-navs{
  display:flex;
  justify-content:flex-end;
  gap:18px;
  margin-top:18px;
}

.llw-timeline-nav{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  width:54px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s ease, transform .2s ease;
}

/* disabled = hell */
.llw-timeline-nav:disabled{
  opacity:.35;
  cursor:default;
  transform:none;
}

.llw-timeline-nav:hover:not(:disabled){
  transform:translateX(2px);
}

.llw-timeline-nav svg{
  width:46px;
  height:22px;
  display:block;
  opacity:1;
}

/* Pfeile (Kunde): schmaler stroke-width 2.5px */
.llw-timeline-nav.prev svg path,
.llw-timeline-nav.next svg path{
  stroke:var(--llw-accent);
  stroke-width:2.5px;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

/* ===== Content ===== */
.llw-timeline-content{
  position:relative;
  overflow:hidden;
}

.llw-timeline-slide{
  display:none;
  align-items:center;
  gap:60px;
}

.llw-timeline-slide.active{
  display:flex;
}

.llw-timeline-image{
  width:50%;
  height:350px;
  background-size:cover;
  background-position:center;
  border-radius:12px;
}

.llw-timeline-text{
  width:50%;
}

.llw-timeline-text h2{
  color:var(--llw-headline);
  margin:0 0 18px 0;
}

.llw-timeline-text span {
	font-family: Outfit;
font-weight: 400 !important}

/* Mobile */
@media (max-width:900px){
  .llw-timeline-years{
    overflow-x:auto;
    justify-content:flex-start;
    gap:42px;
    -webkit-overflow-scrolling:touch;
  }

  .llw-timeline-slide.active{
    flex-direction:column;
  }

  .llw-timeline-image,
  .llw-timeline-text{
    width:100%;
  }
}
