:root {
  --cls-1: #000000;
  --cls-2: #3093B8;
  --cls-3: #F7EC1A;
  --cls-4: #FBAE18;
  --cls-5: #4B3482;
  --cls-6: #EE2A7B;
  --cls-7: #BE1E2D;
  --cls-8: #ffffff;

  --cls-light: #cacaca;
  --cls-dark: #717171;

  --cls-2l: #D8F4FF;
  --cls-2d: #052333;
  --cls-3l: #FFFDD9;
  --cls-4l: #FBEAC8;
  --cls-4d: #D98F00;
  --cls-5l: #E5D9FF;
  --cls-6l: #FFD9E9;
  --cls-7: #BE1E2D;

  --cls-bg: #f2f2f2;
  --cls-bg-dark: #dddddd;

  --cls-bg-transparent: rgba(242, 242, 242, 0.604);
  --cls-bg-transparent-dark: rgba(110, 110, 110, 0.604);


  --cls-shadow-light: 2px 2px 5px var(--cls-light);
  --cls-shadow-dark: 2px 2px 5px var(--cls-dark);

  --cls-font-color-dark: var(--cls-2d);
  --cls-font-color-light: var(--cls-8);

  --base-size: 8px;
  --size-xs: calc( 0.5 * var(--base-size));
  --size-s: calc( 1 * var(--base-size));
  --size-m: calc( 2 * var(--base-size));
  --size-l: calc( 3 * var(--base-size));
  --size-xl: calc( 4 * var(--base-size));
  --size-xxl: calc( 5 * var(--base-size));

  --viewport-xs: 320px;
  --viewport-s: 480px;
  --viewport-m: 768px;
  --viewport-l: 1024px;
  --viewport-xl: 1200px;
  --viewport-xxl: 1400px;
  



}


#timeline {
  background-color: #e2e2e2;
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: center;
  width: 100%;
}



/* timeline */

.timeline {
  position: relative;
  width: 90%;
}

.timeline::before {
  content: '';
  position: absolute;
  width: var(--size-xs);
  top: 0;
  bottom: 0;
}


.timeline.ch-law::before {
  background-color: #3093B8;
  left: 0rem;
}
.timeline.ch-law {
  width: calc(100% - 1rem);
}


.timeline.ch-event::before {
  background-color: #FBAE18;
  left: 1rem;
}

.timeline.ch-event {
  width: calc(100% - 1rem);
}



.timeline.world-event::before {
  background-color: #EE2A7B;
  left: 2rem;
}
.timeline.world-event {
  width: calc(100% - 2rem);
}


/* timeline-event */

.timeline-event {
  padding: 0.9rem 3rem;
  position: relative;
  background-color: inherit;
  width: 100%;
}


/* timeline-year */

.timeline-year {
  font-weight: bold;
}

.timeline-point::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  top: 12px;
  border-radius: 50%;
  z-index: 1;
} 

.timeline-point.ch-law::before {
    background-color: #2196F3;
    left: -51px;
} 

.timeline-point.ch-event::before {
  background-color: #FBAE18;
  left: -36px;
} 

.timeline-point.world-event::before {
  background-color: #EE2A7B;
  left: -21px;
} 
 
 
 /* timeline-content */

 .timeline-content::before {
   content: '';
   position: absolute;
   margin-top: 8px;
   height: 4px;
   border: none;
 
   border-radius: 0px;
 
 }
 
 .timeline-content.ch-law::before {
   background-color: #3093B8;
   
   left: -45px;
   width: 45px;
 }
 .timeline-content.ch-event::before {
   background-color: #FBAE18;
   
   left: -30px;
   width: 30px;
 }
 .timeline-content.world-event::before {
   background-color: #EE2A7B;
   
   left: -15px;
   width: 15px;
 }
 


 .timeline-content.ch-law {
   border: #3093B8 2px solid;/* 
   width: calc(100% - 30px); */
 }
 
 .timeline-content.ch-event {
   border: #FBAE18 2px solid;/* 
   width: calc(100% - 30px); */
 }
 
 .timeline-content.world-event {
   border: #EE2A7B 2px solid;/* 
   width: calc(100% - 30px); */
 }
 
 .timeline-content {
   margin-top: 5px;
   padding: 0.5rem;
   background-color: #f9f9f9;
   position: relative;
   font-size: 0.9rem;
 }

 .timeline-content p {
  margin: 0;
  color: #666;
}


 /* Abstände */

.gap-s {
  margin-top: 10px;
}

.gap-m {
  margin-top: 20px;
}

.gap-l {
  margin-top: 40px;
}

.gap-xl {
  margin-top: 80px;
}