/* +++ Stylesheet Allgemein +++ */

/* ++ CSS-Variablen anlegen: */
:root {
	/* + Sidenav: + */
	--sidenavWidth-minimized: 50px;
	--sidenavWidth-maximized: 150px;
	/* - [ENDE] Sidenav - */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border-collapse: collapse;
	scroll-behavior: smooth;
	font-family : 'PT Sans', 'Trebuchet MS', Helvetica, sans-serif;
	color: #40514e;

	/* Bildschirmgrößen definieren: 
	 * klein: 550px
	 * mittel: 950px
	 */
}

body {
	background-color: #F4F9D2;
}

/* Folgende Klasse verhindert das Ausführen von transition bei Laden der Seite: */
body.no-transition * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

/* + Überschriften + */
h1, h2, h3, h4, h5, h6,
.font.caption {
	font-family: 'Montserrat';
	font-weight: bold;
}
/* - Überschriften - */
/* --- [ENDE] Allgemein --- */

/* +++ Seitennavigation +++ */
#sidenav {
	width: 0px;
	height: 100%;
	position: fixed;
	background-color: antiquewhite;
	z-index: 101;
	overflow: hidden auto;
	left: 0;
	transition: width 0.25s ease-in-out;
	box-shadow: 0 0 5px 0 grey;
}

/* Werte für geöffnete Sidenav festlegen */
#sidenav.open {
	width: var(--sidenavWidth-maximized);
}

	#sidenav.open div#sidenavBackgroundContainer {
		visibility: visible;
		left: var(--sidenavWidth-maximized);
		width: calc(100% - var(--sidenavWidth-maximized));
	}

		#sidenav.open div#sidenavBackgroundContainer div.background {
			opacity: 0.25;
		}

		#sidenav.open div#sidenavBackgroundContainer img.closeBtn {
			opacity: 1;
		}
/* [ENDE] */

	div#sidenavBackgroundContainer {
		transition-property: left, opacity, width, visibility;
		transition-duration: 0.25s;
		transition-timing-function: ease-in-out;
		width: 100%;
		height: 100%;
		left: 0px;
		position: fixed;
		visibility: collapse;
		opacity: 1;
	}

		div#sidenavBackgroundContainer div.background {
			transition-property: inherit;
			transition-duration: inherit;
			transition-timing-function: inherit;
			width: 100%;
			height: 100%;
			background-color: black;
			opacity: 0;
		}

		div#sidenavBackgroundContainer img.closeBtn {
			transition-property: inherit;
			transition-duration: inherit;
			transition-timing-function: inherit;
			position: absolute;
			top: 25px;
			left: 15px;
			width: 30px;
			height: 30px;
			filter: invert(1);
			background-color: coral; /* Wird invertiert und ist dann türkis */
			border-radius: 50%;
			cursor: pointer;
			opacity: 0;
		}

	#sidenav .heading {
		display: flex;
		align-items: center;
		margin: 20px 5px;
		width: var(--sidenavWidth-maximized);
	}

		#sidenav .heading img {
			border-radius: 50%;
			width: 40px;
			height: 40px;
		}

		#sidenav .heading span {
			margin-left: 10px;
		}

	#sidenav .content {
		height: calc(100% - 128px); /* 128, da: Titelbild (oben links) Höhe 40 + 40px Margin = 80px; Navigationspfeil (unten) 48px = insg. 128px */
		overflow: hidden auto;
	}

		#sidenav .module {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			cursor: pointer;
		}

			#sidenav .module span {
				margin: 0 9px;
			}

			#sidenav .module img {
				width: 32px;
				height: 32px;
				margin-left: 9px;
			}

		#sidenav .footer .navigation {
			width: var(--sidenavWidth-minimized);
		}

			#sidenav .footer .navigation img.arrow {
				position: absolute;
				transition: transform 0.25s ease-in-out;
				right: 0;
				bottom: 0;
				cursor: pointer;
			}
/* --- [ENDE] Seitennavigation --- */

/* +++++ mainContentContainer (auch: pageContentContainer) --> beinhaltet allen Hauptinhalt (außer Sidenav) +++++ */
#mainContentContainer {
	margin-left: unset;
	padding: 0 5vw;
	position: relative;
	transition: margin-left 0.25s ease-in-out;
}

/* +++ Kopfzeile Start +++ */
#head {
	position: fixed;
	height: 2.5em;
	border-radius: 30px;
	transform: translateX(-50%);
	transition: left 0.25s ease-in-out, width 0.25s ease-in-out;
	text-align: center;
	margin-top: 20px;
	background-color: #C7E16B;
	box-shadow: 0px 0px 3px 1px lightgrey;
	z-index: 100;
	left: 50%;
	width: 90%;
}

	#head > .content {
		vertical-align: middle;
		line-height: 2.5em;
	}

		#head > .content > img.menuBtn {
			width: 1.7em;
			height: 2em;
			display: inline-block;
			position: absolute;
			left: 18px;
			top: 50%;
			transform: translateY(-50%);
			user-select: none;
			cursor: pointer;
		}

		#head > .content > span#churchName {
			text-align: center;
		}

		#head > .content > span#userBtn {
			width: 2em;
			height: 2em;
			display: inline-block;
			position: absolute;
			right: 20px;
			border: 2px solid grey;
			border-radius: 50%;
			transform: translateY(-50%);
			top: 50%;
			line-height: calc(2em - 4px);
			background-color: white;
			cursor: pointer;
			user-select: none;
		}

			#head > .content > span#userBtn > img {
				width: inherit;
				height: inherit;
				left: -2px;
				top: -2px;
				position: relative;
				border-radius: 50%;
			}
/* --- [ENDE] Kopfzeile --- */

/* +++ Seitennavigationsübersicht +++ */
#navBar {
	position: relative;
    top: 75px;
	height: 25px;
    background-color: #5f9ea021;
	border-radius: 20px;
	transition: margin-left 0.25s ease-in-out, width 0.25s ease-in-out;
	padding: 0 7px;
	font-size: 83%;
	display: flex;
	align-items: center;
}

	#navBar > span:nth-child(1) {
		font-size: 75%;
		font-style: italic;
		margin-right: 7px;
		white-space: nowrap;
	}

	#navBar .image-container {
		display: flex;
		transition: box-shadow 0.25s;
	}

	#navBar .image-container.shadow-right {
		box-shadow: 5px 0 5px -5px #333;
	}

		#navBar .image-container img.page-start {
			width: 17px;
			height: 17px;
			cursor: pointer;
			user-select: none;
		}

		#navBar .image-container span.firstSeparateElm {
			display: none;
		}

	#navBar .scroll-container {
		overflow: auto hidden;
		white-space: nowrap; /* Verhindert umbrechen der Wörter */
		margin-top: 5px;
	}

	/* + Scrollbar anpassen: + */
	#navBar .scroll-container::-webkit-scrollbar {
		height: 1.5px;
	}

	#navBar .scroll-container::-webkit-scrollbar-track {
		background: transparent;
	}

	#navBar .scroll-container::-webkit-scrollbar-thumb {
		background: #888;
	}

	/* - [ENDE] Scrollbar anpassen - */

		#navBar .scroll-container span {
			max-width: 35vw;
			overflow: hidden;
			display: inline-block;
		}

			#navBar .scroll-container p.separateElm {
				padding: 0 5px;
			}

			#navBar .scroll-container p.enabled {
				cursor: pointer;
				text-decoration: underline;
			}

			#navBar .scroll-container p.disabled {
				font-style: italic;
			}
/* --- [ENDE] Navigationsübersicht --- */

/* +++ PageContainer: +++ */
#pageLoaderInfo {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	user-select: none;
	font-weight: bold;
	display: none; /* Ansonsten: Flex! */
	justify-content: center;
	align-items: center;
	text-align: center;
}

#pageContainer {
	padding-top: 80px;
}
/* --- [ENDE] PageContainer --- */

/* +++ Startseite Inhalt +++ */
#startPage {
	width: calc(100% + 20px);
	height: 100% /* für scrollen: % und NICHT vw! */;
	position: relative;
	left: -10px;
	background-color: #F4F9D2;
	display: flex;
	flex-flow: row wrap;
}

	#startPage > .flex-modules {
		flex: 1;
		border: 1.5px solid black;
		margin: 10px;
	}

		#startPage .flex-modules section.head {
			cursor: pointer;
			width: max-content;
		}

			#startPage > .flex-modules section.head img
			{
				width: 24px;
				height: 24px;
				margin: 7px 7px 0 7px; /* Oben Rechts Unten Links (Uhrzeigersinn) */
			}

			#startPage > .flex-modules section.head span:nth-of-type(1) { 
				font-weight: normal;
				font-size: 70%;
				position: relative;
				top: 12px;
				vertical-align: top;
			}

			#startPage > .flex-modules section span.content {
				font-size: 90%;
				display: block;
				margin: 7px;
			}
/* --- [ENDE] Startseite --- */

/* ----- [ENDE] mainContentContainer (pageContentContainer) ----- */

/* ++++++++++ Abschnitt: @media Tags für BildschirmBREITE ++++++++++ */

/* +++ @media für versch. Bildschirmgrößen anpassen +++ */
@media print, screen and (max-width: 710px) {
	/* ++ Sidenav: Standardmäßig ausblenden: ++ */
	#sidenav {
		width: 0px;
	}

		#sidenav .footer img.arrow {
			display: none;
		}
	/* -- [ENDE] Sidenav -- */

	/* ++ pageContentContainer ++ */
	#mainContentContainer {
		margin-left: 0;
	}

		/* ++ Kopfzeile ++ */
		#head {
			left: 50%;
			width: 90%;
		}
		/* -- [ENDE] Kopfzeile -- */

		/* ++ Startseite: Ein Element ++ */
		#startPage > .flex-modules {
			flex-basis: 100%;
		}
		/* -- [ENDE] Startseite -- */
	/* -- [ENDE] pageContentContainer -- */	
}

@media print, screen and (min-width: 711px) and (max-width: 1150px) {
	/* ++ Sidenav: In klein am Rand einblenden: ++ */
	#sidenav {
		width: var(--sidenavWidth-minimized);
	}

		#sidenav .footer img.arrow {
			transform: rotate(0);
		}
		#sidenav.open .footer img.arrow {
			transform: rotate(180deg);
		}
	/* -- [ENDE] Sidenav -- */

	/* ++ pageContentContainer ++ */
	#mainContentContainer {
		margin-left: var(--sidenavWidth-minimized);
	}

		/* ++ Kopfzeile ++ */
		#head {
			left: calc(50% + var(--sidenavWidth-minimized) / 2);
			width: calc(90% - var(--sidenavWidth-minimized));
		}
		/* -- [ENDE] Kopfzeile -- */

		/* ++ Startseite: Zwei Elemente nebeneinander: ++ */
		#startPage > .flex-modules {
			flex-basis: calc(50% - 20px);
		}
		/* -- [ENDE] Startseite -- */
	/* -- [ENDE] pageContentContainer -- */
}

@media print, screen and (min-width: 1151px) {
	/* ++ Sidenav: Komplett ausklappen und anzeigen: ++ */
	#sidenav,
	#sidenav.sidenav-maximized {
		width: var(--sidenavWidth-maximized);
	}
	#sidenav.sidenav-minimized {
		width: var(--sidenavWidth-minimized);
	}

		#sidenav #sidenavBackgroundContainer {
			display: none;
		}

		#sidenav .footer img.arrow,
		#sidenav.sidenav-minimized .footer img.arrow {
			transform: rotate(0deg);
		}
		#sidenav:not(.sidenav-minimized) .footer img.arrow,
		#sidenav.open .footer img.arrow
		#sidenav.sidenav-maximized .footer img.arrow {
			transform: rotate(180deg);
		}
	/* -- [ENDE] Sidenav -- */

	/* ++ pageContentContainer ++ */
	#mainContentContainer,
	#mainContentContainer.sidenav-maximized {
		margin-left: var(--sidenavWidth-maximized);
	}
	#mainContentContainer.sidenav-minimized {
		margin-left: var(--sidenavWidth-minimized);
	}

		/* ++ Kopfzeile ++ */
		#head,
		#mainContentContainer.sidenav-maximized #head {
			left: calc(50% + var(--sidenavWidth-maximized) / 2);
			width: calc(90% - var(--sidenavWidth-maximized));
		}

		#mainContentContainer.sidenav-minimized #head {
			left: calc(50% + var(--sidenavWidth-minimized) / 2);
			width: calc(90% - var(--sidenavWidth-minimized));
		}
		/* -- [ENDE] Kopfzeile -- */

		/* ++ Startseite: Drei Elemente nebeneinander: ++ */
		#startPage > .flex-modules {
			flex-basis: calc(33% - 30px);
		}
		/* -- [ENDE] Startseite -- */

		@media print, screen and (min-width: 1401px) {
			/* ++ Startseite: Vier Elemente nebeneinander: ++ */
			#startPage > .flex-modules {
				flex-basis: calc(25% - 40px);
			}
			/* -- [ENDE] Startseite -- */
		}
	/* -- [ENDE] pageContentContainer -- */
}
/* --- [ENDE] Auf Bildschirmgröße anpassen --- */