@import url("stylesheet_root.css");

/*Seitenformatierung Startseite*/
.container-main{
	display: flex;
	flex-direction: column;
	margin-right: 20px;
	margin-left: 20px;
}

@media(max-width:600px){
	.container-main{
		margin-right: 10px;
		margin-left: 10px;
	}
}

	#Hauptseite_Ueberschrift{
		font-size: 1.5em;
		text-align: center;
		color: var(--Ueberschriftfarbe);
		padding: 0.5em;
	}

/****************************************************************/
	/*grosses Bild*/
/****************************************************************/

	.Bilderrahmen-Hauptseite{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		align-content: center;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5em;
	}
	
		.container-grosses-Bild{
			text-align: center;
			width: 100%;
			align-self: center;
		}
		
			.Bild_aktiv{
				position: relative;
			}

			.Bild_inaktiv{
				display: none;
			}

			.Bild_Hauptseite{
				width: 100%;
				object-fit: cover;
				max-height: 20em;
			}

			.Bildbeschreibung{
				background-color: var(--Farbe_Sonntag);
				color: white;
				padding-top: 0.3em;
				padding-bottom: 0.3em;
				font-size: 0.7em;
			}
			
			.prev,.next {
			  cursor: pointer;
			  position: absolute;
			  top: 60%;
			  width: auto;
			  padding: 0.5em;
			  margin-top: -2em;
			  color: white;
			  font-weight: bold;
			  font-size: 2em;
			  user-select: none;
			  -webkit-user-select: none;
			}

			@media(min-width:600px){
				.prev:hover,
				.next:hover {
				  background-color: rgba(0, 0, 0, 0.8);
				}
			}

			/* Position the "next button" to the right */
			.next {
			  right: 0;
			  border-radius: 0.5em 0 0 0.5em;
			}
			.prev {
			  left: 0;
			  border-radius: 0 0.5em 0.5em 0;
			}
/****************************************************************/
	/*Krabbenbild*/
/****************************************************************/
			#Bild_Krabbe{
				max-height: 6em;
			}
			
/****************************************************************/
	/*Thumbnails*/
/****************************************************************/
		
			.Bildleiste{
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				align-content: center;
				align-items: center;
				justify-content: flex-start;
			}

				@media(min-width:600px){
					.highlight-Bild:hover{
						opacity: 1;
					}
				}
				
				.highlight-Bild{
					flex:1;
					opacity: 0.4;
				}
				
				.Platzhalter{
					flex:1;
				}
				
				.Bildleiste_aktiv{
					opacity: 1;
				}
				
				.Bild_Hauptseite_Slider{
					width: 100%;
					object-fit: cover;
					height: 5em;
					cursor: pointer;
				}
				
				@media(max-width:600px){
					.Bild_Hauptseite_Slider{
						height: 2.5em;
					}
				}
	
/****************************************************************/
	/*Links*/
/****************************************************************/

	.Uebersicht_Ueberschrift{
		text-align: center;
		color: var(--Navigationsfarbe);
		font-size: 1em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	}

	.Uebersicht_Unterschrift{
		text-align: center;
		color: var(--Textschriftfarbe);
		font-size: 0.8em;
		padding-top: 0.5em;
	}

	.Bilder_Links_Unterseiten{
		max-height: 8em;
	}
	@media(max-width:600px){
		.Bilder_Links_Unterseiten{
			max-height: 5em;
		}
	}
				
	.container-Uebersicht{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		margin-top: 1em;
	}
	
		.item-Uebersicht{
			flex:1;
			text-align: center;
			align-self: stretch;
			border: 1px solid grey;
			margin: 0.3em;
			padding: 0.3em;
			text-decoration: none;
		}