#TIMELINE_3 {

  --color								:	rgba(30, 30, 30);
  --ColorBody						:	rgba(252,252,227);
  --ColorBg							:	rgba(240,240,240);
  --ColorBgWichtig			:	rgba(240,240,240, 0.2);
  --ColorLine						:	rgba(225,225,225);
  --ColorDateBg					:	rgba(252, 255, 207);
  --ColorDateBgWichtig	:	rgba(255,255,0);
  --ColorDate						:	rgba(5,5,5);
  
  --Schatten-Box				: 5px;

&.mod_eventlist {
  --col-gap							: 3rem;
  --row-gap							: 2rem;
  --line-w							: 0.25rem;		/* Breite der vertikalen Line */
  --inlineP							: 1.5rem;
  padding								: 2em var(--Schatten-Box) 2em 2.8em;
  display								: grid;
  grid-template-columns	: var(--line-w) 1fr;
  grid-auto-columns			: max-content;
  column-gap						: var(--col-gap);
  list-style						: none;
  width									: 100%;
  margin-inline					: auto;

	/* vertikale Linie */
	&::before {
		content							: "";
		grid-column					: 1;
		grid-row						: 1 / span 999;
		background					: var(--ColorLine);
		border-radius				: calc(var(--line-w) / 2);
		} /* vertikale Linie */

	/* card */
	& > li {
		--padding						: 0.5em;
		position:relative;
		display							: grid;
		grid-column					: 2;
		grid-row						: span 2;
		grid-template-rows	: min-content min-content min-content;
		border							: 1px solid lightgray;
		box-shadow					: 3px 5px var(--Schatten-Box) gray;
		background					: var(--ColorBg);
			&.wichtig {
		background					: var(--ColorBgWichtig);	}
		padding-bottom			: var(--padding);
		margin-bottom		: var(--row-gap);		/* vertikaler Abstand zwischen den Boxen */
		a {
				text-decoration	: none;
				color: inherit;
				} /* a */
		p {
			margin:0;
			padding:0;
			} /* p */
		
		&.ohne_beschreibung { .titel,.descr {
			opacity	: 30%;
			background-image		: linear-gradient(gray, white);
			}}‚‘

		} /* li */

	/* Daten: Titel, Ort, Datum und Zeitraum
	 * Elemente: Titelzeil, Kreis, Dreieck
	 */
	.titel {
		--dateH							: 3.4rem;
		height							: var(--dateH);
		text-align					: center;
		background-color		: var(--ColorDateBg);
			li.wichtig & {
		background-color		: var(--ColorDateBgWichtig);	}
		color								:	gray;
		font-size						: smaller;
		font-weight					: normal;
		display							: grid;
		place-content				: center;
		position						: relative;

		/* Dreieck nach rechts */
		&::before {
		  z-index						:	0;
			content						: "";
			position					: absolute;
			top								: 50%;
			transform					: translate(-100%, -50%);
			clip-path					: polygon(0 0%, 100% 50%, 0 100%);
			width							: calc(var(--row-gap)/1.3);
			aspect-ratio			: 1;
			background				: var(--ColorDateBg);
			background-image	: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
			}
			
		/* Kreis */
		&::after {
			z-index						:	1;
			content						: "";
			position					: absolute;
			top								: 50%;
			transform					: translate(50%, -50%);
			right							: calc(100% + var(--col-gap) + var(--line-w) / 2);
			width							: 3.3rem;
			aspect-ratio			: 1;
			background				: inherit;
			border						: 2px solid var(--ColorDateBgWichtig);
			border-radius			: 50%;
			}

		.location {
			color							: var(--ColorDate);
			font-size					: clamp(1.0rem, 2.5vw, 1.25rem);;
			font-weight				: 700;

			&::before {
				content					: " — ";
				color						: lightgray;
				font-size				: smaller;
				font-weight			: normal;
				}
			}

		/* Jahr in den Kreis verschieben */
		.datum	{
			z-index						:	2;
			position					: absolute;
			left							:	calc(0px - var(--col-gap)*1.55);
			font-size					: 1.5rem;
			line-height				: 1.0;

			transform					: translate(0, -0.7rem);
			&.monat {
				transform				: translate(0, -0.3rem);
			}
			& monat {
				font-size					: 1.2rem;
				font-weight				: normal;
				font-style				: italic;
				}
			} /* Datum */

		.zeitraum {
			overflow				: hidden;
			font-size				: 0.7em;
			font-style			: italic;
			text-align			: center;
			font-weight			: lighter;
			color						: gray;
			margin-bottom		: 0.5em;
			} /* Zeitraum */

		} /* Titel, Ort, Datum und Zeitraum */

	.descr {
		padding							: var(--padding);
		font-size						: 1rem;
		margin							: 0 0 1rem 0;
		&.mehr::before {
			content						: "mehr..";
			text-align				: center;
			color							: black;
			font-style				: italic;
			position					: absolute;
			bottom						:	var(--padding);
			left							: var(--padding);
			width							: 4em;
			background-color	: var(--ColorDateBg);
			border						: 1px solid var(--ColorDateBg);
			border-radius			: 25%;
		}
		img {
			display						:	inline-block;
			margin						: 0 0 0 1rem;
			width							: 8rem;
			float							: right;
			}
		} /* Beschreibung */
	& > li.wichtig a .descr.mehr::before{
			background-color		: var(--ColorDateBgWichtig);
		}		
	.weiterlesen {
		position						:	absolute;
		z-index							:	9;
		top									: 0;
		opacity							: 0%;
		width								: 100%;
		height							: 100%;
		color								: red;
		border							: 1 solid black;
		background-color		: rgba(235,227,5, 50%);
		text-shadow					:	-2px 2px 1px white,  2px -2px 1px white, 2px 2px 1px white,  -2px -2px 1px white, 3px 3px 5px black;
		font-size						: 2.0rem;
		text-align					: center;
		padding-top					: 2em;
		&:hover{
			border: 1px solid var(--ColorDateBg);
			opacity: 100%;
			} /* :hover */
		} /* weiterlesen */
				
	} /* mod_eventlist */

@media (min-width: 40rem) {
  &.mod_eventlist {
    grid-template-columns	: 1fr var(--line-w) 1fr;
	  padding-left					: 0em;

		&::before {
			grid-column					: 2;
			}
			
		li:nth-child(odd) {
			grid-column					: 1;

			/* Dreick nach links */
			.titel::before {
				left							: calc(100% + var(--col-gap)/2 + 0px);
				background-image	: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
				clip-path					: polygon(0% 50%, 100% 100%, 100% 0%);
				}

			/* Kreis in der Mitte positionieren */
			.titel::after {
				transform					: translate(-50%, -50%);
				left							: calc(100% + var(--col-gap) + var(--line-w) / 2);
				}

			/* Jahr in den Kreis verschieben */
			.datum {
/* 			color: blue; */
/* 				&.monat { */
					left						:	0;
					right						:	calc(-100% - var(--col-gap)*2.1);
/* 					} */
				}

			.descr {
				img {
					float						: left;
					margin					: 0 1rem 0 0;
					}
				}

			} /* li:nth-child(odd) */
			
		li:nth-child(even) {
			grid-column					: 3;
			}
			
		li:nth-child(odd) {
			.descr.mehr::before {
				left							:	calc( 100% - var(--padding) );
				transform					: translate(-100%, 0%);
				}
			}
			
		/* Verschiebt die rechte Spalte nach unten (ab der zweiten Karte */
		li:nth-child(2) {
			grid-row: 2/4;
			}

  	} /* .mod_eventlist */

	} /* @media */

}