:root {
  
}

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

#TIMELINE_5 {
/*
 *	Größen und Abstände
 * ____________________________________________________________ */
  --anzeige-breite-maximal: 70em;  /* 70em == 1120px */
  
  --zeitstrahl-linie				: 1px solid black;
  --zeitstrahl-radius				: 30px;
  --startpunkt-durchmesser	: 20px;
  --karte-innenabstand			:	0.3em;
/* 
		zeile
			kiste
				ereignis
					datum
					karte
						titel
						ort
						img
						zeitraum
						text
						taste
							hinweis
 */
padding-top: 2em;
h1					{	margin					: 0 0 3em 1em;
							}
p						{	margin					: 0 0 0.3em 0;
							line-height			: 1;
	:last-of-type {
							margin-bottom		: 15px;
							}	}
/* 
.zeile			{	}
 */
.kiste			{	width						: clamp(1em, 25vw, 13em );
							margin-right		: 5px;
							}
.ereignis		{	margin-bottom		: 90px;
							}
.datum 			{	margin					: 0;
							}
.karte			{	padding					: var(--karte-innenabstand);
	  					}
.titel			{	margin					: 0 0 5px 0;
						/* Kein Umbruch, zeigt nur eine Zeile an, bei Bedarf gekürzt (...)  */
							white-space			: nowrap;
							overflow				: hidden;
							text-overflow		: ellipsis;
							}
.ort				{	margin					: 0 0 5px 0;
							line-height			: 1;
							min-height			: 2em;
							}
.img				{ width						: 100%;
							height					: clamp(1em, 15vw, 10em );
							}
.zeitraum		{	margin					: 0;
							}
.text				{	padding					: 0.5em 0.25em 0 0.25em;
							height					: 5em;
							overflow				: hidden;
						/* Kein Umbruch, zeigt nur eine Zeile an, bei Bedarf gekürzt (...)  */
							text-overflow		: ellipsis;
							}
.taste			{	margin					: 8px 2px;
						  padding					: 3px 10px;
							}
.hinweis		{	padding					: 5px 0;
							width						: 9em;
							}

} /* Größen und Abstände */
#TIMELINE_5 {
/*
 *	Farben
 * ____________________________________________________________ */
  --farbe-hintergrund				: white;
  --farbe-datum							: 210, 30, 30;
  --farbe-text							: gray;
  --farbe-text-wichtig			: black;

							color						: var(--farbe-text);
.wichtig		{
							color						: var(--farbe-text-wichtig);
							}
a						{ text-decoration	:	none;
							color						: inherit;
							}
.wichtig		{
							color						: var(--farbe-text-wichtig);
							}
p						{ color						: inherit;
							}
h1,
.datum			{	color						: rgba( var( --farbe-datum) );
							background-color: var(--farbe-hintergrund);
							}
.zeitraum		{	color						: gray;
							}
.taste			{ color						: gray;
	/* */				background-color: lightgray;
	/* */				opacity					: 90%;
	&:hover		{	color						: white;
		/* */			background-color: rgba( var( --farbe-datum) );
		a				{ color						: white;
							}
							}
							}
.hinweis		{ color						: rgba( var( --farbe-datum) );
							text-shadow			: 0px 0px 3px white;
					 		background-color: darkgray;
							}
} /* Farben */
#TIMELINE_5 {
/*
 *	Schriftarten
 * ____________________________________________________________ */
.datum,
h1					{ font-family: 'Marker Felt', sans-serif;		}

/*
 *	Schriftgrößen und -art, Textausrichtung und -gestaltung
 * ____________________________________________________________ */
h1					{ font-size				: clamp(2.0em, 2.3vw, 3.0em);
							}
p						{	font-size				: clamp(0.6em, 1.2vw, 1.0em);
							hyphens: auto; 
							}
.kiste			{	text-align			: center;
							}
.ereignis		{	text-align			: center;
							}
.datum			{ font-size				: clamp(1.0rem, 2.5vw, 2.5rem);
							font-weight			: bold;
	div				{ font-size				: clamp(0.5rem, 2.0vw, 1.0rem);
							}	}
.karte			{	text-align			: center;
							}
.titel			{	font-size				: clamp(1.0em, 2.5vw, 2.0em);
							font-weight			: bold;
							}
.ort				{	font-size				: clamp(0.8em, 1.2vw, 1.2em);
							font-style			: italic;
							font-weight			: normal;
							}
.zeitraum		{ font-size				: clamp(0.5em, 1.2vw, 1.0em);
							font-weight			: normal;
							font-style			: italic;
							}
.text				{	text-align			: justify;
							}
.taste			{ font-size				: clamp(0.2em, 2vw, 1.2em);
							text-align			: center;
							text-decoration	: none;
							}
.m ehr			{ font-size				: clamp(0.2em, 1vw, 1em);
							text-align			: center;
							text-decoration	: none;
							}
.hinweis		{	font-weight			: bold;
							font-size				: clamp(0.2em, 1vw, 0.8em);
							text-align			: center;
							}
} /* 	Schriftgrößen und -art, Textausrichtung und -gestaltung */
#TIMELINE_5 {

/* 
		zeile
			kiste
				ereignis
					datum
					karte
						titel
						ort
						img
						zeitraum
						text
						taste
							hinweis
 */ /* Struktur */ 

.zeile {
	
/* 	border: 1px solid black; */
	display					: flex;
	justify-content	: space-around;
	position				: relative;

  &:nth-child(2n+1) {
		flex-direction: row-reverse;
		.verticle-line {
			left: 0;
			}
	  }
	&:nth-child(2) {
		.horizontal-line {
			width		: calc(100% - var(--zeitstrahl-radius));
			left		:calc(50% - var(--zeitstrahl-radius)/2);
			}
		}
	&:last-child {
		.horizontal-line {
			width		: calc(100% - var(--zeitstrahl-radius) - var(--startpunkt-durchmesser));
			left		: calc(50% + var(--zeitstrahl-radius)/2 - var(--startpunkt-durchmesser)/2);
			}
		}
	&:last-child:nth-child(2n+1) {
		.horizontal-line {
			width		: calc(100% - var(--zeitstrahl-radius) - var(--startpunkt-durchmesser));
			left		: calc(50% + var(--zeitstrahl-radius)/2 - var(--startpunkt-durchmesser));
			}
		}

	.verticle-line {
		margin			: auto 0;
		padding			: 0;
		width				: 1px;
		height			: calc(100% - var(--zeitstrahl-radius)*2 + 1px);
		border-right: var(--zeitstrahl-linie);
		position		: absolute;
		top					: 0;
		right				: 0;
		bottom			: 0;
	
		.zeile:last-child & {
			display: none;
			}
		}
	
  .horizontal-line {
		margin			: 0 auto;
		width				: calc(100% - var(--zeitstrahl-radius)*2);
		border-top	: var(--zeitstrahl-linie);
		position		: absolute;
		left				: 50%;
		transform		: translate(-50%, 0%);
		z-index			: 0;
		}
	}

.kiste {
/* border: 1px solid red; */
	position			: relative;

	&:before {
		content			: '';
		position		: absolute;
		left				: 0;
		height			: 1px;
		width				: 100%;
		}

	.zeile:first-child &:first-child {
		width: 100%;
		}

  & h1, & .datum {
		position		: relative;
		line-height	: 1em;
		z-index			: 1;
		display			: inline-block;
		width				: auto;
		transform		: translate(0, -50%);
		div {
			margin-top: 0.5em;
			line-height:0;
			}
  	}
  
  & h1 {
		transform		: translate(0, -0.2em);
		text-align	: left;
  	}

}

.karte {
	position			: relative;
	border-radius	: 0.3em;
/* 	max-width			: 15em; */
	box-shadow		: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	&.mehr::before {
		content						: "mehr...";
		text-align				: center;
		color							: black;
		font-style				: italic;
		position					: absolute;
		font-size					: clamp(0.2em, 1vw, 1em);
		bottom						:	calc(var(--karte-innenabstand) + 0.25em);
		right							: calc(var(--karte-innenabstand) + 0.25em);
		width							: 4em;
		background-color	: rgba(0, 0, 0, 0.2);
		border						: 1px solid gray;
		border-radius			: 50%;
		}
}

.corner {
	width					: var(--zeitstrahl-radius);
	height				: var(--zeitstrahl-radius);
	border-right	: var(--zeitstrahl-linie);
	border-top		: var(--zeitstrahl-linie);
	position			: absolute;
	right					: 0;
	top						: var(--zeitstrahl-radius);
	border-radius	: 0 var(--zeitstrahl-radius) 0 0;
	top						: 0;
	
  .zeile:last-child & {
		/* Punkt anstatt Rundung */
		width				: var(--startpunkt-durchmesser);
		height			: var(--startpunkt-durchmesser);
		transform		: translate(calc(0px - var(--startpunkt-durchmesser)/2), -50%);
		background-color: #000;
		border-radius: 50%;
		}
  .zeile:last-child:nth-child(2n+1) & {
		/* Punkt anstatt Rundung */
		width				: var(--startpunkt-durchmesser);
		height			: var(--startpunkt-durchmesser);
		transform		: translate(calc(0px + var(--startpunkt-durchmesser)/2), -50%);
		background-color: #000;
		border-radius: 50%;
		}

	.zeile:nth-child(2n+1) & {
/* 		right					: inherit; */
		left					: 0;
		border-left		: var(--zeitstrahl-linie);
		border-right	: 0;
		border-radius	: var(--zeitstrahl-radius) 0 0 0;
		}
  
	&.bottom {
	
	  .zeile:last-child & {
			display: none;
			}

		border-top		: 0;
		border-bottom	: var(--zeitstrahl-linie);
		border-radius	: 0 0 var(--zeitstrahl-radius) 0;
		top						: inherit;
		right					: 0;
/* 		z-index				: 1; */
		bottom				: -1px;
		
		.zeile:nth-child(2n+1) & {
			border-radius: 0 0 0 var(--zeitstrahl-radius);
			}
			
		.zeile:first-child & {
		/* Punkt anstatt Rundung */
			border-radius: 50%;
			width				: var(--startpunkt-durchmesser);
			height			: var(--startpunkt-durchmesser);
			transform		: translate(0px, 50%);
			background-color: black;
			}
		}

	}

.taste {
  border				: 1px solid;
	border-radius	: 15px;

  display				: inline-block;
  position			: relative;

  cursor				: pointer;
/*   transition-duration: 0.4s; */

	.hinweis {
		visibility		: hidden;
		border-radius	: 6px;
/* 		border: 1px solid black; */

		/* Positionierung */
		position			: absolute;
		transform			: translate(-8em, -5em);
		z-index				: 1;
		box-shadow		: 5px 3px 8px 2px rgba(0,0,0,0.24);
	}

	&:hover {
		box-shadow		: 5px 3px 8px 2px rgba( var( --farbe-datum), 0.5 );
		.hinweis {
		  visibility	: visible;
		  }
		}
	}

img {
	z-index				: 2;
	position			: relative;
	width					: 100%;
	border-radius	: 0.2em;
  height				: inherit;
  object-fit		: cover;
  filter: opacity(50%);
  }
.wichtig img	{
	filter: opacity(100%);
}

.kein_bild {
			background-image	: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, transparent 100%);

}  
.weiterlesen {
	z-index:9;
	position						:absolute;
	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					: 2em;
	&:hover{
		border: 1px solid var(--ColorDateBg);
		opacity: 100%;
		} /* :hover */
	} /* weiterlesen */



/*==============Responsive==============*/
@media screen and (max-width: 400px) {
p						{	font-size				: clamp(0.6em, 5vw, 1.2em);
							}
.datum			{ font-size				: clamp(2.0rem, 3.5vw, 3.5rem);
	div				{ font-size				: clamp(1.5rem, 6.0vw, 3.0rem);
							}	}
.karte			{	text-align			: center;
							}
.titel			{	font-size				: clamp(2.0em, 3.5vw, 3.0em);
							}
.ort,
.zeitraum		{	font-size				: clamp(0.6em, 5vw, 1.2em);
							}
.text				{	text-align			: justify;
							}
.taste			{ font-size				: clamp(0.6em, 5vw, 1.2em);
	&:hover .hinweis { visibility	: hidden;  }
							}
.img {
	height: clamp(1em, 30vw, 8em );
}
.zeile {
	flex-direction: column;
  &:nth-child(2n+1) {
		flex-direction: column;
		}
	}
.kiste {
	width:100%
	}
.karte {
	max-width:100%
	}
.corner,
.verticle-line,
.horizontal-line {
	display:none;
	}
} /* @media screen */
}
/* Ende TIMELINE_5 */