/* 
    Created on : 01.04.2025, 11:27:30
    Author     : kaeptn
*/






:root {
  --body-bg: #eee;
  --timeline-time-bg: cadetblue;
  --timeline-time-size: 5rem;
  --timeline-event-bg: white;
  --ruler-width: 3px;
  --vertical-gap: 6.6rem;
 
}

.timeline {
  display: grid;
  position: relative; /* to contain ruler */
  grid-template-columns: 1fr;
  row-gap: var(--vertical-gap);
  padding-left: 0;
  list-style: none;
}

.timeline-item {
  display: flex;
  font-size: 94%;
  text-align: left;
  hyphens: auto;
}

.timeline-time {
  z-index: 1; /* above ruler */
  display: grid; /* grid for alignment */
  align-items: center;
  justify-items: center;
  width: var(--timeline-time-size);
  height: 1.8em;
  background: var(--timeline-time-bg);
 
  font-size: calc(var(--timeline-time-size) / 6);
  font-weight: bold;
  color: #fff;
}

.timeline article {
  flex: 1; /* use remaining space */
  position: relative;
  bottom: 1.7rem;/* to contain arrow */
  background: var(--timeline-event-bg);
  padding: 1rem;
  margin-top: 0.9rem;
  margin-left: 2rem;
  filter: drop-shadow(3px 3px 4px rgba(0,0,0,.15));
}

.timeline article::after {
  content: ""; /* arrows with borders */
  position: absolute;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  left: -1.4rem; /* right arrow styles */
  border-width: .8rem 1.4rem .8rem 0;
  border-color: transparent var(--timeline-event-bg) transparent transparent;
}

.timeline::before {
  content: ""; /* vertical ruler */
  width: var(--ruler-width);
  background: var(--timeline-time-bg);
  grid-column: 1;
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--timeline-time-size) / 2);
  justify-self: start;
}

.timeline-item:first-of-type::before {
  content: "heute";
  z-index: 1; /* above ruler */
  display: grid; /* grid for alignment */
  align-items: center;
  justify-items: center;
  width: var(--timeline-time-size);
  height: var(--timeline-time-size);
  background: var(--timeline-time-bg);
  border-radius: 50%;
  font-size: calc(var(--timeline-time-size) / 5);
  font-weight: bold;
  color: #fff;
}

@media (min-width: 600px) {
  .timeline {
    grid-template-columns: 1fr var(--timeline-time-size) 1fr;
  }
  .timeline-item {
    grid-column: 2 / 4;
  }
  .timeline-item:nth-child(odd) {
    grid-column: 1 / 3; /* odds articles on the left */
    flex-direction: row-reverse;
  }
  .timeline-item:nth-child(odd) article {
    margin-right: 2rem;
  }
  .timeline-item:nth-child(odd) article::after {
    right: -1.4rem; /* left arrow styles */
    left: auto;
    border-width: .8rem 0 .8rem 1.4rem;
    border-color: transparent transparent transparent var(--timeline-event-bg);
  }
  .timeline::before {
    grid-column: 2 / 3;
    justify-self: center; /* horizontal centering */
  }
}

/* Reset / deco */


div.backbutton{
    
       position: fixed;
       top: 130px;
       left: 5%;
       
       z-index: 10;
    
}