@charset "utf-8";
/* CSS Document */

/***************************************************************************

	Projekt:			madiko
	CSS fuer:			default - Zeitstrahl / timelines
	Autor / copyright:	madiko. Franziska Koeppe http://madiko.com
	letzte Aenderung:	2026-09-04
     letzte Prüfung:     2026-09-04
	
 ***************************************************************************/

/* Einzahl für atoms, modules und classes verwenden! */

/* ##### table of content
	allgemeine Angaben 
	Zeit-Box // timeline item

     ACHTUNG: Farben hinterlegt via colors_plaette.css
	
 ***************************************************************************/	


/***************************************************************************
	
	allgemeine Angaben (umschließender wrapper)

***************************************************************************/

/* ##### wrapper ##### */
.timeline-wrapper {
     max-width: 800px;
     width: 90%;
     margin: 2em auto;
     text-align: left;
}



/***************************************************************************
	
	Zeit-Box // timeline item

***************************************************************************/

.timeline-item {
     padding: 2.5em 2em;
     position: relative;
     text-align: left;

     border-left: 3px solid #217DD9;

     h3 {
          font-size: 2em;
          padding: 0;
          margin: -1em 0 0 0;
     }

	/* Design des Punktes */
	&::after {
          border: 5px solid #217DD9;
          background: #9AB9D9;
	}     

     /* Design des Punktes auf der Linie */
     &::after {
          width: 1em;
          height: 1em;
          display: block;
          top: 1em;
          position: absolute;
          left: -0.9em;
          border-radius: 1em;
          content: '';
     }

     /* Auslaufen-Lassen Zeitstrahl am Ende */
     &:last-child {
          border-image: 
               linear-gradient(
                    to bottom,
                    #217DD9,
                    rgba(0,0,0,0)) 1 100%;
     }     

}