ul.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  hyphens: auto;
  --unit: 1rem
}
ul.timeline::after {
    content: '';
    clear: both;
    display: block;
}
ul.timeline p {
  font-size: .85em
}
ul.timeline h3, ul.timeline h4 {
    display: inline;
    font-size: 1.1em;
}
ul.timeline h3 {
  font-size: 1.2em;
  color: var(--color)
}
ul.timeline h3::after {
    content: ' – ';
}
ul.timeline li {
  --height: 5rem;
  min-height: var(--height);
  position: relative;
  display: block;
  background-color: #fff;
  border-color: var(--color);
  border-width: .5rem;
  border-style: solid;
  padding: 1rem;
  margin: 2rem 0;
  box-sizing: border-box;
}
ul.timeline li::before {
  content: "";
  background-color: var(--color);
  position: absolute;
  display: block;
  width: calc(var(--unit)/2);
  height: var(--height);
  top: 100%;
  left: calc(50% - (var(--unit)/2));
}
ul.timeline li:last-child::before, ul.timeline li:last-child::after {
  content: none;
}
ul.timeline li:nth-child(20n+1){
  --color: #a1c94a;
}
ul.timeline li:nth-child(20n+2){
  --color: #8bc354;
}
ul.timeline li:nth-child(20n+3){
  --color: #75bd5d;
}
ul.timeline li:nth-child(20n+4){
  --color: #5fb767;
}
ul.timeline li:nth-child(20n+5){
  --color: #48b170;
}
ul.timeline li:nth-child(20n+6){
  --color: #3ab084;
}
ul.timeline li:nth-child(20n+7){
  --color: #2caf98;
}
ul.timeline li:nth-child(20n+8){
  --color: #1dadab;
}
ul.timeline li:nth-child(20n+9){
  --color: #0facbf;
}
ul.timeline li:nth-child(20n+10){
  --color: #00aad2;
}
ul.timeline li:nth-child(20n+11){
  --color: #0facbf;
}
ul.timeline li:nth-child(20n+12){
  --color: #1dadab;
}
ul.timeline li:nth-child(20n+13){
  --color: #2caf98;
}
ul.timeline li:nth-child(20n+14){
  --color: #3ab084;
}
ul.timeline li:nth-child(20n+15){
  --color: #48b170;
}
ul.timeline li:nth-child(20n+16){
  --color: #5fb767;
}
ul.timeline li:nth-child(20n+17){
  --color: #75bd5d;
}
ul.timeline li:nth-child(20n+18){
  --color: #8bc354;
}
ul.timeline li:nth-child(20n+19){
  --color: #a1c94a;
}
ul.timeline li:nth-child(20n+20){
  --color: #b7cf41;;
}

/* 2 Spalten */
@media (min-width: 550px) and (max-width: 799px){
  ul.timeline li {
    margin: 1rem 0;
    width: calc(50% - 1rem);
    float: left;
    --height: 7rem;
  }
  ul.timeline li:nth-child(4n+3),
  ul.timeline li:nth-child(4n+4) {
    float: right;
  }
  ul.timeline li:nth-child(4n+1)::before,
  ul.timeline li:nth-child(4n+3)::before {
    top: calc(var(--height)/2 - var(--unit));
    width: calc(var(--unit)*3);
    height: calc(var(--unit)/2);
  }
  ul.timeline li:nth-child(4n+1) {
    margin-right: 2rem
  }
  ul.timeline li:nth-child(4n+1)::before {
    left: 100%;
  }
  ul.timeline li:nth-child(4n+3) {
    margin-left: 2rem
  }
  ul.timeline li:nth-child(4n+3)::before {
    left: -3rem;
  }
}

/* 3 Spalten */
@media (min-width: 800px) and (max-width: 1099px) {
  ul.timeline {
    margin: 0 auto;
  }
  ul.timeline li {
    margin: 1rem 0;
    width: calc(33.3% - 1.4rem);
    float: left;
    --height: 8rem;
  }
  ul.timeline li:nth-child(6n+4),
  ul.timeline li:nth-child(6n+5),
  ul.timeline li:nth-child(6n+6){
    float: right;
  }
  ul.timeline li:nth-child(6n+1)::before,
  ul.timeline li:nth-child(6n+2)::before,
  ul.timeline li:nth-child(6n+4)::before,
  ul.timeline li:nth-child(6n+5)::before{
    top: calc(var(--height)/2 - var(--unit));
    width: calc(var(--unit)*3);
    height: calc(var(--unit)/2);
  }
  ul.timeline li:nth-child(6n+1),
  ul.timeline li:nth-child(6n+2) {
    margin-right: 2.1rem;
  }
  ul.timeline li:nth-child(6n+1)::before,
  ul.timeline li:nth-child(6n+2)::before{
    left: 100%;
  }
  ul.timeline li:nth-child(6n+4),
  ul.timeline li:nth-child(6n+5) {
    margin-left: 2.1rem;
  }
  ul.timeline li:nth-child(6n+4)::before,
  ul.timeline li:nth-child(6n+5)::before {
    left: -3rem;
  }
}

/* 4 Spalten */
@media (min-width: 1100px) and (max-width: 1249px) {
  ul.timeline {
    margin: 0 auto;
  }
  ul.timeline li {
    margin: 1rem 0;
    width: calc(25% - 1.35rem);
    float: left;
    --height: 9rem;
  }
  ul.timeline li:nth-child(8n+5),
  ul.timeline li:nth-child(8n+6),
  ul.timeline li:nth-child(8n+7),
  ul.timeline li:nth-child(8n+8){
    float: right;
  }
  ul.timeline li:nth-child(8n+1)::before,
  ul.timeline li:nth-child(8n+2)::before,
  ul.timeline li:nth-child(8n+3)::before,
  ul.timeline li:nth-child(8n+5)::before,
  ul.timeline li:nth-child(8n+6)::before,
  ul.timeline li:nth-child(8n+7)::before{
    top: calc(var(--height)/2 - var(--unit));
    width: calc(var(--unit)*3);
    height: calc(var(--unit)/2);
  }
  ul.timeline li:nth-child(8n+1),
  ul.timeline li:nth-child(8n+2),
  ul.timeline li:nth-child(8n+3) {
    margin-right: 1.8rem;
  }
  ul.timeline li:nth-child(8n+1)::before,
  ul.timeline li:nth-child(8n+2)::before,
  ul.timeline li:nth-child(8n+3)::before{
    left: 100%;
  }
  ul.timeline li:nth-child(8n+5),
  ul.timeline li:nth-child(8n+6),
  ul.timeline li:nth-child(8n+7) {
    margin-left: 1.8rem;
  }
  ul.timeline li:nth-child(8n+5)::before,
  ul.timeline li:nth-child(8n+6)::before,
  ul.timeline li:nth-child(8n+7)::before {
    left: -3rem;
  }
}

/* 5 Spalten */
@media (min-width: 1250px){
    ul.timeline {
    margin: 0 auto;
  }
  ul.timeline li {
    margin: 1rem 0;
    width: calc(20% - 1.7rem);
    float: left;
    --height: 11rem;
  }
  ul.timeline li:nth-child(10n+6),
  ul.timeline li:nth-child(10n+7),
  ul.timeline li:nth-child(10n+8),
  ul.timeline li:nth-child(10n+9),
  ul.timeline li:nth-child(10n+10){
    float: right;
  }
  ul.timeline li:nth-child(10n+1)::before,
  ul.timeline li:nth-child(10n+2)::before,
  ul.timeline li:nth-child(10n+3)::before,
  ul.timeline li:nth-child(10n+4)::before,
  ul.timeline li:nth-child(10n+6)::before,
  ul.timeline li:nth-child(10n+7)::before,
  ul.timeline li:nth-child(10n+8)::before,
  ul.timeline li:nth-child(10n+9)::before{
    top: calc(var(--height)/2 - var(--unit));
    width: calc(var(--unit)*3);
    height: calc(var(--unit)/2);
  }
  ul.timeline li:nth-child(10n+1),
  ul.timeline li:nth-child(10n+2),
  ul.timeline li:nth-child(10n+3),
  ul.timeline li:nth-child(10n+4) {
    margin-right: 2.125rem;
  }
  ul.timeline li:nth-child(10n+1)::before,
  ul.timeline li:nth-child(10n+2)::before,
  ul.timeline li:nth-child(10n+3)::before,
  ul.timeline li:nth-child(10n+4)::before{
    left: 100%;
  }
  ul.timeline li:nth-child(10n+6),
  ul.timeline li:nth-child(10n+7),
  ul.timeline li:nth-child(10n+8),
  ul.timeline li:nth-child(10n+9) {
    margin-left: 2.125rem;
  }
  ul.timeline li:nth-child(10n+6)::before,
  ul.timeline li:nth-child(10n+7)::before,
  ul.timeline li:nth-child(10n+8)::before,
  ul.timeline li:nth-child(10n+9)::before {
    left: -3rem;
  }
}