/* Base styling */
.timeline-wrapper {
  position: relative;
  height: 98.8vh;
  overflow: hidden;
  background: linear-gradient(to bottom, #444444 0%, #5d5d5d 30%, #4f4f4f 60%, #555555 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: -5.8vh;
  transform: scale(0.89) translateX(-9.5vw);
  min-width: 120vw;
}

html, body {
  overflow-y: hidden;
  height: 100vh;
  margin: 0;
}

/* unter 786px (Smartphone) normales Scrollen erlauben */
@media (max-width: 786px) {
  html, body {
    overflow-y: auto;
    height: auto;
  }
}

.timeline-container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  height: 100%;
}



/* Bild-Container */
.timeline-images {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 40%;
  height: 100%;
  padding-left: 20px;
  z-index: 1001;
  background: url(/assets/Light_Sculptures/Light_Sculpture_06.jpg) no-repeat center center;
  background-size: contain;
  transition: background-image 1s ease;
  position: relative !important;
  left: -1rem !important;
}

/* Jedes <img> darin */
.timeline-image {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  transition: opacity 0.5s ease-in-out;
  z-index: 1001;
  opacity: 0;
}

.timeline-image.active {
  opacity: 1;
}

/* Inhalts-Bereich */
.timeline-content {
  width: 55%;
  height: auto;
  z-index: 100;
  padding: 20px;
  position: relative !important;
  left: -2rem !important;
}

/* Tablet (iPad) spezifisch: 768–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .timeline-wrapper {
    transform: none !important;
    margin-top: 0 !important;
    min-width: auto !important;
    justify-content: center;
    align-items: flex-start;
  }
  .timeline-images {
    width: 100% !important;
    padding: 0 1rem !important;
    background-size: contain !important;
    background-position: center center !important;
    height: auto !important;     /* bei Bedarf anpassen */
    justify-content: flex-start !important;
  }
  .timeline-image {
    width: auto !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

.timeline-image.active {
  opacity: 1;
}

.timeline-content {
  width: 55%;
  height: auto;
  z-index: 100;
  padding: 20px;
}

.timeline__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;       /* Abstand zwischen Zahl und Text */
  margin-left: 2rem;  /* Einrücken aller Header gleichmäßig */
}


.timeline-title {
  text-align: left;
  font-size: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: 20px;
  color: #ffffff;
  margin-top: 20%;
  margin-left: 15%;
}

.timeline__item {
  padding-top: 10px;
  margin-top: -10px !important;
  margin-left: 16%;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

@media (min-width: 1300px) {
  .timeline__item {
    padding-top: 25px;
  }
  
}

.timeline__item::before {
  display: none;
}


.timeline__item.active {
  opacity: 1;
}

.timeline__day {
  position: relative;       /* damit left/ margin sicher greifen */
  left: -3.5rem;            /* passe den Wert an, bis es genau sitzt */
  font-weight: 600;
  font-size: clamp(1.5rem, 1.5vw, 1.5rem);
  color: white;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  transform: translateX(-3.2rem)
}

@media (min-width: 1300px) {
  .timeline__day {
    left: -2rem;
  }
  
}

.right-timeline {
  flex-shrink: 0;
  min-width: 3ch;
  text-align: left;
  padding-right: 3rem;
}

.icon-left{
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding-right: 4.2rem;
}
.icon-left-head{
  transform: translateX(-2.7rem)
}

.timeline__day span {
  font-weight: 300;
  color: white;
  text-transform: none;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.timeline__day-sum,
.additional-text p {
color: white;
font-weight: 300;
font-size: clamp(0.9rem, 1.2vw, 1.25rem);
line-height: 1.4;
font-size: 16px;
margin: 0;
padding-left: 8%;
margin-right: 17%;
}




.clearfix {
  padding-top: 40px;
}

.timeline__item {
  list-style-type: none;
}


/*TIMELINE ITEM SECTION START*/

/* Sicherstellen, dass sichtbarer Text und zusätzlicher Text direkt anschließen */
.timeline__day-sum,
.additional-text {
margin-top: 0;
margin-bottom: 0;
line-height: 1.6;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}



/* Zusätzlicher Text standardmäßig versteckt, mit sanfter Transition */
.additional-text {
overflow: hidden;
transition: max-height 0.3s ease;
max-height: 0;
}

/* Wenn aktiv, erweitern wir den Bereich – passe den max-height-Wert ggf. an */
.additional-text.active {
max-height: 200px;
}

/* Container für Überschrift und Toggle-Pfeil */
.timeline__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Toggle-Pfeil-Button */
.toggle-more {
  background: transparent;
  border: none;
  font-size: 3rem;
  cursor: pointer;
  color: #fff;
  transition: color 0.3s ease, transform 0.3s ease;
  align-items: center;
  transform: translateY(37px);
  padding-left: 10px;
  margin-right: 3rem;
}

.toggle-more:hover,
.toggle-more:focus {
  color: #e9e9e9;
  outline: none;
}

/* Pfeil-Icon mit Transition */
.arrow-icon {
  transition: transform 0.3s ease;
}

.arrow-icon.rotate {
  transform: rotate(180deg);
}

/*TIMELINE ITEM SECTION END*/


  .meant-to-be-hidden{
    height: 96px;
  }

/* Responsive styling */
@media (max-width: 768px) {
  .timeline-wrapper {
    flex-direction: column;
    height: auto !important; /* Statt 450vw - automatische Höhe */
    min-height: auto !important; /* Keine Mindesthöhe */
    max-height: none !important; /* Keine maximale Höhe */
    padding: 0;
    margin-bottom: 0 !important; /* Entferne jeden Margin am Ende */
    padding-bottom: 0 !important; /* Entferne jedes Padding am Ende */
    overflow: visible !important; /* Erlaube normales Scrollen */
  }

  .meant-to-be-hidden{
    height: 70px;
  }

  .timeline-images {
    width: 100%;
    height: 100vh;              /* nimmt Höhe der Bilder an */
    display: flex;
    align-items: center;       /* vertikal zentrieren */
    justify-content: center;   /* horizontal zentrieren */
    background-size: cover;    /* oder contain, je nach gewünschtem Effekt */
    background-position: center;
    margin-top: 0;             /* keine negativen Offsets mehr */
  }

  /* Sicherstellen, dass Bilder nie beschnitten werden */
  .timeline-image {
    display: block;
    max-width: 100% !important;
    max-height: 40vh !important;
    object-fit: contain;
    object-position: center;
  }

  /* Toggle-Pfeil in seine normale Position zurückholen */
  .toggle-more {
    transform: none;           /* entfernt das translateY */
    font-size: 2rem;           /* optional: etwas kleiner auf Mobil */
    margin-top: 0.5rem;        /* Platz über dem Pfeil */
    padding-left: 0;
    z-index: 1002;             /* damit er über allem liegt */
  }
  
  .timeline-content {
    width: 100%;
    height: auto;          /* Contentbereich auf 60% des Viewports, damit alle Punkte sichtbar bleiben */
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .icon-left{
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  padding-right: 4rem;
}
.icon-left-head{
  transform: translateX(-2.4rem)
}

  
  
  /* SVG-Linie ausblenden */
  .svg-timeline {
    transform: translateX(30px) !important;
  }
  
  .timeline-wrapper {
    padding: 0;
  }
  
  .timeline__item {
    margin-left: 5%;
    padding-top: 20px;
  }

  .timeline__item:last-child {
    margin-bottom: 60px;
  }
  
  
  .timeline-title,
  .timeline__day {
    text-align: left;
    margin-left: 0.1rem;
  }
  
  .timeline__day-sum {
    text-align: left;
    padding-left: 7.5%;
  }

  .timeline__day {
    left: -4rem !important;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .timeline-wrapper {
    justify-content: center;
  }
  
  .timeline-images,
  .timeline-content {
    width: 40%;            /* Etwas schmaler, für eine zentrierte Ausrichtung */
    height: 100%;          /* Bei Seitenlayout bleiben beide Bereiche 100% hoch */
    padding: 0;
  }
  
  .timeline__item {
    margin-left: 25%;      /* Items gleichmäßiger zentrieren */
  }
  
  .timeline-title {
    margin-left: 0;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  
  .timeline__day-sum {
    padding-left: 8%;
    text-align: left;
  }
}

/* Clearfix */
.clearfix:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}

.clearfix {
  display: block;
}

/* Pseudo-Element für den unteren Hintergrundbereich */
.timeline-wrapper:after {
  content: '';
  display: block;
  height: 200px;
  width: 100%;
  background-size: cover;
  position: absolute;
  background-position: 25% center;
  z-index: -10;
  bottom: 0;
}

/* SVG Timeline-Linie */
.svg-timeline {
  position: absolute;
  margin-left: 7%;
  display: block;
  width: 1px;
}

@media screen and (min-width: 50em) {
  .svg-timeline {
    display: block;
  }
}