/*
 *  Formatierungen für Timeline
 */
:root {
  
}

* {
	box-sizing: border-box;
	outline: none !important;
}
body {
	max-width				: var(--anzeige-breite-maximal);
	margin					: auto;
	background-color: var(--farbe-hintergrund);
}

h1.timeline_h1 {
		width: 100%;
		text-align: center;
}

#TIMELINE_1 { 
/* Farben -----------------------------
 */  
  --farbe-gruen									: #cddc39;
	--farbe-hintergrund-boxen			: var(--farbe-gruen);
  --farbe-hintergrund-zeitstrahl: rgb(from var(--farbe-hintergrund-boxen) R G B / 0.5);
} /* Farben */

#TIMELINE_1 { 
/* Abstände und Größen----------------
*/
  --padding-allgemein						: 0.2rem;              /* allgemeiner Innenabstand */
  --radius-ecken								:	0.5rem;
  
  /* Zeitachse */
  --zeitachse-breite						: 1.3rem; 

  /* Ein Ereignis */
  --ereignis-hoehe							: clamp(6rem, 4.67rem + 6.67vw, 9rem);
  --ereignis-abstand-aussen			: 1rem;
  --ereignis-abstand-innen			: 1rem;
  --ereignis-schattenbreite			: 5px;
  
  /* Punkt auf der Zeitachse */
  --ereignis-punkt-durchmesser: clamp(3rem, 1.67rem + 6.67vw, 6rem);

} /* Abstände und Größen */

#TIMELINE_1 {

.event {
	position:relative;
	.mehr::before {
		content						: "mehr..";
		text-align				: center;
		color							: black;
		font-style				: italic;
		position					: absolute;
		bottom						:	var(--padding-allgemein);
		right							: calc(1rem + var(--ereignis-hoehe));
		width							: 4em;
		background-color	: var(--farbe-hintergrund-boxen);
		border						: 1px solid var(--farbe-hintergrund-boxen);
		border-radius			: 25%;
		} /* mehr */
	.weiterlesen {
			position						:	absolute;
			z-index							:	9;
			top									: 0;
			left								: 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					: 1em;
			&:hover{
				border: 1px solid var(--ColorDateBg);
				opacity: 100%;
				} /* :hover */
			} /* weiterlesen */
	
.ereignis {

	display								: grid;
	grid-template-columns	: 0fr 0fr var(--ereignis-punkt-durchmesser) 0fr 4fr;
  grid-template-areas		: "leer bild jahr punkt text";
  margin-bottom					: var(--ereignis-abstand-aussen);
  height								: var(--ereignis-hoehe);
  position							: relative;
	font-size							: clamp(0.6rem, 0.42rem + 0.89vw, 1rem);

  a {
  	text-decoration			: none;
  	color								: inherit;
  }
  div {
/* 
		padding: var(--padding-allgemein) 0;
		margin: 0;
 */
		display: inline-block;
  }

	.ereignis-leer,
	.ereignis-bild,
	.ereignis-jahr,
	.ereignis-text {
		height							: inherit;
		overflow						: hidden;
	  position						: relative;
		}

	.ereignis-leer {
	  grid-area: leer;
		}
  
	.ereignis-bild {
	  grid-area						: bild;
		position						: relative;
  	text-align					: right;
  	margin-right				: var(--ereignis-abstand-innen);
		border-radius				: var(--radius-ecken);
		background-image		: linear-gradient(var(--farbe-hintergrund-zeitstrahl), white);
  	
		.bild {
			height							: inherit;
			width								: calc(var(--ereignis-hoehe)*8/3);
			img {
/* 
				width							: 100%;
				height						:	100%; 
 */
				width							: inherit;
				height						:	inherit; 

				object-fit				:	cover;
				background-image	: linear-gradient(var(--farbe-hintergrund-zeitstrahl), white);
				background-image	: linear-gradient(lightgray, white);
				border-radius			:	inherit;
				overflow					:	hidden;
				} /* img */
		} /* bild */
		.titel, .ort {
			position					: absolute;
			top								: 5%;
			right							: calc(1 * var(--ereignis-abstand-innen)) ;
			padding-left			: var(--ereignis-abstand-innen);
			color							: white;
			text-shadow				: 1px 1px 2px black, 0 0 25px var(--farbe-gruen), 0 0 5px green;
		}
		.ort {
			top								: 50%;
			vertical-align: bottom;
			font-size					: 1.5rem;
		}
	} /* ereignis-bild */
	
	.ereignis-jahr {
	  grid-area						: jahr;
		text-align					: center;
		z-index							: 10;
		margin-top					: auto;
		margin-bottom				: auto;
		padding-left				: 2%;
		padding-right				: 2%;
		padding-top					: 3%;
		height							: clamp(3rem, 2.11rem + 4.44vw, 5rem);
		background-image		: url("/files/Daten Knallfrösche/IconFroschHell.png"); /* anpasssen */
		background-position	: center;
		background-repeat		: no-repeat;
		background-size			: contain;
		line-height: 130%;
		.monat {
			display:block;
			margin-top				: 0.5rem;
			font-size					: 110%;
			}
		.jahr {
			font-size: 230%;
			}
		} /* ereignis-jahr */

	.ereignis-punkt {
	  grid-area							: punkt;
		&::before { /* senkrechter Strich */
			content							: "";
			position						: absolute;
			top									:	0;
			transform						: translateX(calc(0px - var(--ereignis-punkt-durchmesser) / 2 - var(--zeitachse-breite) / 2));
			width								: var(--zeitachse-breite);
			height							: calc(var(--ereignis-hoehe) + var(--ereignis-abstand-aussen));
			background-color		: var(--farbe-hintergrund-zeitstrahl);
			} /* senkrechter Strich */
		
		&::after { /* Kreis */
			content							: "";
			position						: absolute;
			top									: calc((var(--ereignis-hoehe) - var(--ereignis-punkt-durchmesser)) / 2);
			transform						: translateY(-30%);
			transform						: translateX(calc(0px - var(--ereignis-punkt-durchmesser)));
			width								: var(--ereignis-punkt-durchmesser);
			aspect-ratio				: 1;
			background-image		: radial-gradient(var(--farbe-gruen) 40%, rgb(146 181 35));
			border-radius				: 50%;
			} /* Kreis */
	
		} /* ereignis-punkt */

	.ereignis-text {
	  grid-area						: text;
		height							: inherit;
  	margin-left					: var(--ereignis-abstand-innen);
  	margin-right				: var(--ereignis-abstand-innen);
		padding-left				: var(--ereignis-abstand-innen);
		padding-right				: var(--ereignis-abstand-innen);
		padding-right				: 0;
		border-radius				: var(--radius-ecken);
		border							: 1px solid var(--farbe-hintergrund-zeitstrahl);
		background-image		: linear-gradient(var(--farbe-hintergrund-zeitstrahl), white);
		.jahr, .titel, .ort, .zeitraum {
			display: inline;
			font-weight: bold;
			font-size: 130%;
			}
		.ort {
			&::before {
				content: " → ";
				opacity: 30%;
				}
			&::after {
				content: " ← ";
				opacity: 30%;
				}
			}
		.titel, .zeitraum {
			font-weight: normal;
			font-style: italic;
			font-size: 100%;
			}
		.bild {
			display						: inline;
			float							: right;
			box-shadow				: none;
			margin-left				: 1em;
		img {
			display						: inline;
			height					: var(--ereignis-hoehe);
			width						: var(--ereignis-hoehe);
			object-fit			:	cover;
			background-image: linear-gradient(var(--farbe-hintergrund-zeitstrahl), white);
/* 			background-image: linear-gradient(lightgray, white); */
			border-radius		:	inherit;
			overflow				:	hidden;
			} /* img */
		}
	} /* ereignis-text */

	&.ohne_beschreibung {
		.ereignis-jahr {
			opacity	: 50%;
			}
		.ereignis-punkt {
			&::after { /* Kreis */
			background-image		: radial-gradient(lightgray 40%, white);
				}
			}
		.ereignis-bild,
		.ereignis-text {
			opacity	: 50%;
			background-image		: linear-gradient(gray, white);
			}
		}
		
	.ereignis-text,
	.ereignis-bild {
		box-shadow					: var(--ereignis-schattenbreite) var(--ereignis-schattenbreite) 5px #aaaaaa;
	} /* Schatten */
	
	} /* ereignis */

} /* event */

@media screen and (min-width:720px) {
	.event {
		.mehr::before {
			right							: calc(1rem + 0px);
			}
		.ereignis {
			grid-template-columns	: 0fr 2fr var(--ereignis-punkt-durchmesser) 0fr 4fr;
			.ereignis-text {
				.bild {
					display					: none;
					}
				}
			}
		}
	} /* media */

@media screen and (min-width:1260px) {
	.event {
		.mehr::before {
			right							: calc(1rem + 0px);
			}
		.ereignis {
			grid-template-columns	: 2fr 2fr var(--ereignis-punkt-durchmesser) 0fr 4fr;
			.ereignis-text {
				.bild {
					display					: none;
					}
				}
			}
		}
	.event:nth-child(even) {
		.ereignis {
			grid-template-columns	: 4fr var(--ereignis-punkt-durchmesser) 0fr 2fr 2fr;
			grid-template-areas		: "text jahr punkt bild leer";
			.ereignis-bild {
				text-align					: left;
				margin-left					: var(--ereignis-abstand-innen);
				margin-right				: 0;
				.titel, .ort {
					left							: calc(1 * var(--ereignis-abstand-innen)) ;
					padding-left			: 0;
					padding-right			:	var(--ereignis-abstand-innen);
					}
				}
			}
		}
	} /* media */

} /* TIMELINE_1 */