/*	Name: 			seelsorge.css
	Beschreibung:	Spezielles CSS für Seelsorge Planer		*/
	
#seelsorge.menue {
    position:relative;
	top: 0px;
	display: flex;
	margin:						0px 0px 0px 0px;
	height:						fit-content;
    width:						100%;
	justify-content:			space-evenly;
	align-items:				center;
    background-color: 			transparent;
	transition:					top 0.9s ease-in-out;
}
#seelsorge.menue .list	{
	display:					flex;
	flex-flow:					row nowrap;
	justify-content:			left;
	align-items:				center;
    margin:						0 1.8vw 0 1.8vw;
	padding:					0px;
	width:						100%;
}

#seelsorge.menue .menu-item:link				{color: hsl(210,  60%,  50%);} 
#seelsorge.menue .menu-item:hover 			{color: #FEFEFE; opacity: 1.0; transition: top 0.6s ease-in-out;}
#seelsorge.menue .active {
	/*background-color: 			hsl(210,  80%, 35%) !important;*/
	color:						#FEFEFE !important;
	font-weight:				400 !important;
	/*box-shadow: 				0 0 2px 1px rgba(255, 255, 255, 0.4),
								0 1px 12px 0 rgba(0, 0, 0, 0.5) !important;*/
	opacity: 1.0 !important;
}

#seelsorge.menue .menu-item	{
	padding:					0px;
	margin:						0px 0px 0px 30px;
    display:					block;
	width:						175px;
	max-width:					24vw;
	height:						100%;
	text-align:					center;
	/*border-radius:				9999px;*/
	color:						#DDDDDD;
	font-size:					100%;
	font-weight:				100;
	cursor: pointer;
	opacity: 0.9;
	
	transition: 				background-color 0.5s ease;
	/*box-shadow: 				0 1px 1px 0 rgba(255, 255, 255, 0.3),
								0 1px 6px 0 rgba(0, 0, 0, 0.2);*/
}
#seelsorge.menue .indicator {
	position: absolute;
	left: 0px;
	bottom: -3px;
	width:						0px;
	border-bottom:				2px solid #FEFEFE;
	transition:					width 0.9s ease-in-out, left 0.6s ease-in-out;
}

.content_seelsorge {
	position:					relative;
	display:					none;		/* Ausblenden, wird per Javascript gesteuert */
	justify-content: center;
	justify-self: center;
	padding:					5px;
	margin-top:					0px;
	width:						calc(100% - 20px - 2px);	/* Abzug von Padding+Border */
	min-height:					100%;
	border:						1px solid #DDDDDD;
	border-radius:				5px;
	background-color:			hsl( 60, 33%,  100%);
}
.content .active {
	display: flex;
}

p								{font-size:	10pt;}
	.long						{text-align: justify;}
	.up							{text-transform: uppercase;}
	.low						{text-transform: lowercase;}
	.capital					{text-transform: capitalize;}

table, div.table {
	display: 					table;
	padding: 					0px;
	margin: 					0px;
	align-items:				center;
	border:						0px solid #000000;	
}

/* Spezielle Styles */
div.title {
    display: 				table;
	-ms-flex:				100%;
	flex:					100%;
	margin:					5px;
    background-color: 		transparent;
	border-radius:			6px;
	text-align:				center;
	box-shadow: 			0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	background:				linear-gradient(to top left,
											hsl(60, 33%, 70%) 0%,
											hsl(195, 33%, 70%) 100%);
}
p.title {
	margin:						0px;
	background-color:			hsl(297, 50%, 20%);
    -webkit-background-clip:	text;
    -moz-background-clip:		text;
    background-clip:			text;
    color:						transparent;
    text-shadow:				rgba(255,255,255,0.5) 0px 3px 3px;
	font-size:					31pt;
	font-weight:				bold;
}

/* Wiederholbare Styles*/

.hidden {
	display:					none;
}
.left {
	text-align:					left;
}
.right {	
	text-align :					right;
}

img.header {
	padding: 			0px;
	margin: 			0px;
	height:				100px;
	width:				auto;
	max-height:			100px;
	border:				0px solid rgba(0, 0, 0, 0.2);
	border-radius: 		5px;
}

/* div.menue {
    -ms-flex:					80px;
	flex:						80px;
	flex-flow:					column wrap;
	padding:					15px 5px 5px 5px;
	margin:						5px;
	height:						auto;
	align-items:				center;
	
	border:					6px solid hsl(60, 33%, 90%) ;
    border-radius:				6px;
	background-color: 			hsl(60, 33%, 75%);
	box-shadow: 				0 4px 8px 0 rgba(0, 0, 0, 0.2), 
								0 6px 20px 0 rgba(0, 0, 0, 0.3);
	
	text-align:					left;
	font-family:				Bahnschrift, Arial;
	font-size:					12pt;
	font-weight:				bold;
}	 */
/* div.menue a:link				{color: hsl(195,  60%,  50%);} 
div.menue a:visited 			{color: hsl(195,  60%,  50%);}
div.menue a:hover 				{color: hsl(195, 100%, 100%);}
div.menue a:active 				{color: hsl(195,  20%,  50%);}
div.menue a.currentPage			{background-color: hsl(208, 50%, 70%); color: hsl(195,  50%,  20%);}
div.menue ul	{
	display:					flex;
	flex-flow:					column wrap;
	
	list-style-type:			none;
	width:						100%;
	padding:					0px;
	margin:						0px;
} */
/* div.menue ul a	{
	padding:					10px;
	padding-left:				20px;
	margin:						5px;
    margin-left:				0px;
	display:					block;
	width:						auto;
	height:						auto;
	border-radius:				20px;
	text-decoration:			none;
	background-color: 			hsl(60, 33%, 100%);
	border:						0px solid  hsl(195, 0%, 80%);
	transition: 				background-color 0.5s ease;
	box-shadow: 				0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 6px 0 rgba(0, 0, 0, 0.2);
} */
/* div.menue ul a:hover {
	border:						0px solid  hsl(60, 33%, 100%);
	opacity:					1;
	color:						hsl(60, 50%, 80%);
	background-color: 			hsl(208,  60%, 35%);
	box-shadow: 				0 1px 6px 0 rgba(0, 0, 0, 0.4), 0 1px 12px 0 rgba(0, 0, 0, 0.4);

}
img.menue_bg  {
	width:						90px;
	padding-top:				15px;
	opacity:					0.7;
} */

/* Content-Styles: Output und Panels */
/* div.content {
	display:					flex;
	-ms-flex:					70%;
	flex:						70%;
	flex-flow:					row wrap;
	padding:					5px;
	margin:						5px;
    width:						auto;
	height:						auto;
	max-height:					calc(100vh - 37px - 140px);
	overflow:					auto;
	background-color:	 		hsl(60, 33%, 90%);
	border-radius:				6px;
	box-shadow: 				0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
} */

div.content_panel form {
	padding:					0px;
	padding-top:				0px;
	margin:						0px;
	margin-top:					10px;
	/*overflow:					auto;*/
	width:						calc(100% - 0px);					/* Abzug von Abständen */
	height:						calc(100vh - 37px - 140px - 100px + 2px);	/* Abzug von Abständen */
	/*background-color:			hsl( 60, 33%, 95%);*/	
}
div.content_panel input {
	/* margin-top:					5px; */
	margin-left:				0px;
	padding:					10px;
	padding-left:				20px;
	padding-right:				20px;
	width:						120px;
	color:						hsl(60, 33%, 75%);
	background-color:			hsl(208, 50%, 30%);
	border:						2px solid #AAA;
	border-radius:				5px;
	font-weight:				bold;
}

div.content_output {
	padding:					15px;
	padding-top:				0px;
	padding-bottom:				0px;
	margin:						0px;
	margin-top:					10px;
	overflow:					auto;
	width:						calc(100% - 31px);	/* Abzug von Abständen */
	max-height:					calc(100vh - 37px - 140px - 100px);	/* Abzug von Abständen */
	background-color:			hsl( 60, 33%, 95%);
	border:						1px solid #DDDDDD;	
	border-radius:				4px;
}
div.content_output ul {
	margin-left:				0px;
	padding-left:				0px;
}
div.content_output li {
	margin-left:				20px;
	padding-left:				0px;
}

/*Pofilgalerie*/
ul.galerie {
	display:					block;
	padding:0px;
	margin:10px;
	width:auto;
	list-style:	none;	
}
li.galerie {
	position:					relative;
	float:						left;
	padding: 					0px;
	margin:						6px;
	width:						122px;
	height:						auto;
	border:						1px solid hsl(60, 33%, 50%);
	border-radius: 				6px;
	/*background-color:			#000;*/
	opacity:					0.9;
	background:					linear-gradient(to top left,
												hsl(297, 70%, 10%) 0%,
												hsl(297, 60%, 40%) 30%,
												hsl(297, 40%, 30%) 60%,
												hsl(297, 70%, 30%) 100%
												);
}
li.galerie:hover {
	border:						1px solid  hsl(60, 33%, 30%);
	opacity:					1;
	
	background:					linear-gradient(to top left,
												hsl(297, 70%, 20%) 0%,
												hsl(297, 60%, 50%) 30%,
												hsl(297, 40%, 40%) 60%,
												hsl(297, 70%, 40%) 100%
												);
	z-index:	0;
}
div.galerie_green {
	position:					absolute;
	left:						50%;
	top:						66px;
	transform:					translate(-50%, -50%);
	width:						100%;
	height:						70%;
	border-top-left-radius:		5px;
	border-top-right-radius:	5px;
	border-bottom-left-radius:	50% 17%;
	border-bottom-right-radius:	50% 17%;
	opacity:					1;
	
	background: radial-gradient(closest-corner at 30% 50%, hsl(146,70%,50%), hsl(146,70%,20%));
	
	box-shadow: 0 0 2px 1px hsl(146,70%,50%), 0 3px 3px 1px hsl(146,70%,50%,0.7), 0 4px 6px hsl(146,70%,50%,0.5);
	
	z-index:	-3;
}
div.galerie_red {
	position:					absolute;
	left:						50%;
	top:						66px;
	transform:					translate(-50%, -50%);
	width:						100%;
	height:						70%;
	border-top-left-radius:		5px;
	border-top-right-radius:	5px;
	border-bottom-left-radius:	50% 17%;
	border-bottom-right-radius:	50% 17%;
	opacity:					1;
	
	background: radial-gradient(closest-corner at 10% 50%, hsl(360,70%,50%), hsl(360,70%,20%));
	
	box-shadow: 0 0 2px 1px hsl(360,70%,50%), 0 3px 3px 1px hsl(360,70%,50%,0.7), 0 4px 6px hsl(360,70%,50%,0.5);
	
	z-index:	-3;
}
img.galerie_image {
	padding: 					0px;
	margin: 					0px;
	width: 						100%;
	height:						auto;
	border: 					0px solid hsl(60, 33%, 60%);
	border-top-left-radius:		5px;
	border-top-right-radius:	5px;
	border-bottom-left-radius:	50% 17%;
	border-bottom-right-radius:	50% 17%;
	
	z-index:	-2;
}
div.galerie_name {
	display:					table;
	padding: 					0px;
	margin:						0px;
	width:						100%;
	height:						60px;
	text-align:					center;	
	font-size:					11pt;
	font-weight:				bold;

	z-index:	-1;
}

/* Profildetails
--------------------------------------------------------------------------------
 */
div.profil_overlay {
	display:					none;
	position:					fixed;
	top:						0;
	left:						0;
	width:						100%;
	height:						100%;
	justify-content:			center;
	align-items:				center;
	
	background-color:			hsl(195,  60%,  10%,0.9);
	z-index: 7;
}	
div.profil_container {
	display:					none;
    flex-flow:					row wrap;
	justify-content: 			stretch;
    align-items: 				stretch;
	align-content:				center;
	position:					absolute;
	padding:					10px;
	margin:						10px;
    max-width:					60%;
	border:						0px solid #DDDDDD;
    background-color:			transparent;
	border-radius:				20px;
	box-shadow: 				0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.5);
	
	z-index:					-1;
}
div.profil_container a:link		{color: hsl(297, 33%, 33%);} 
div.profil_container a:visited	{color: hsl(297, 33%, 33%);}
div.profil_container a:hover 	{color: hsl(297, 50%, 60%);}
div.profil_container a:active 	{color: hsl(297, 50%, 60%);}
div.profil_container_bg {
	position:					absolute;
	top:						0;
	left:						0;
	width:						100%;
	height:						100%;
	
	background-color:			rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter:	blur(5px);
	backdrop-filter:			blur(5px);	
	border-radius:				20px;	
	
	z-index:					-2;
}
.profil_name {
	margin: 					10px;
	width:						100%;
	text-align:					left;
	font-size:					16pt;
	font-weight:				bold;
	color:						hsl(195, 30%, 15%);
	text-shadow:				1px 1px 2px #888888;
}
.profil_name_sub {
	width:						100%;
	text-align:					left;
	font-size:					12pt;
	font-weight:				bold;
	color:						hsl(297, 50%, 40%);
}
.profil_exit {
    display:					table;
    position:					absolute;
	top: 						15px;
	right: 						15px;
	width:						30px;
	height:						30px;
	
	text-align:					center;
	font-size:					16pt;
	
	background-color:			#FFFFFF;
	border:						0px solid #DDDDDD;
	border-radius:				50%;
	box-shadow: 				0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.4);
}
.profil_exit:hover {
	cursor: pointer;
	background-color:	hsl(297, 70%, 40%, 0.7);	
}
div.profil_content_small {
	padding: 					5px;
	margin: 					5px;
	width:						250px;
	text-align:					center;
	
	background-color:			#FFFFFF;
	border:						5px solid hsl(60, 33%, 80%);
    border-radius: 				10px;
	box-shadow: 				0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 3px 6px 0 rgba(0, 0, 0, 0.4);
}
div.profil_content_small img {
	padding: 					0px;
	margin: 					0px;
	width:						100%;
	border-radius:	 			3px;
}
div.profil_data {
    -ms-flex:					50%;
	flex: 						50%;
	padding:					30px;
	margin:						5px;
    
	border:						0px solid #DDDDDD;
    background-color:			hsl(60, 33%, 80%);
	border-radius:				10px;
	box-shadow: 				0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 3px 6px 0 rgba(0, 0, 0, 0.4);
}
div.profil_data td {
	padding-top: 				2px;
	padding-left: 				5px;
	padding-right: 				5px;
	padding-bottom: 			2px;
	margin: 					0px;
	width:						auto;
	
	border-spacing:				0px;
	border-bottom:				1px solid #AAAAAA;
	
}
div.profil_calendar {
	-ms-flex:					50%;
	flex: 						50%;
	width:						auto;
	height:						auto;
	min-width:					600px;
	padding:					5px;
	margin:						5px;
	background-color:			#FFFFFF;
	border:						1px solid #DDDDDD;
	border-radius:				10px 10px 10px 10px;
	box-shadow: 				0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 3px 6px 0 rgba(0, 0, 0, 0.4);
}	

/* Kalenderblatt*/
.page_calendar {
	position:					relative;
	display:					none;		/* Ausblenden, wird per Javascript gesteuert */
	height:						calc(100vh - 20px - 2px);
	max-height:					750px;
	max-width:					525px;
	padding:					0px;
	margin:						5px;
	background-color:			#FEFEFE;
	border:						1px solid hsl(210, 0%,  90%);
	border-radius:				10px;
	box-shadow: 				0px 1px 1px 0 rgba(0, 0, 0, 0.3), 0 3px 6px 0 rgba(0, 0, 0, 0.4);	
	
	aspect-ratio: 7/10;

	/* Bild */
		/*background-image:		url('img/bg_sun.jpg');*/
		background-repeat:		no-repeat;
		background-position:	center;
		background-size:		cover;
	
}
.page_calendar .active {		display:	flex;	}

.page_calendar button {
	position:					absolute;
	right:						5px;
	top:						5px;
	height:						30px;
	border-radius:				5px;
	border:						1px solid transparent;
	background-color: 			hsl(297, 10%, 95%);
	z-index:	10;
}
.page_calendar button:hover {
	border:						1px solid hsl(297, 40%, 90%);
	background-color:			hsl(297, 80%, 95%);
}
.calendar_header {
	position:					relative;
	display:					flex;
	flex-flow:					row nowrap;
	justify-content:			center;
	align-items:				center;
	height:						34px;
	margin:						0px 0px 0px 0px;
	padding:					5px 5px 5px 5px;
	background:					linear-gradient(to bottom, 
								hsl(210, 57%, 80%) 0%, 
								hsl(210, 57%, 97%) 90%);
	border:						0px solid #DDDDDD;
	border-bottom:				1px solid #DDDDDD;
	border-top-left-radius:		9px;
	border-top-right-radius:	9px;
}
.calendar_title {
	position:					relative;
	height:						fit-content;
	width:						150px;
	font-size:					14.0pt;
	text-align:					center;
}
.arrow_item {
	padding:					5px;
	border-radius:				5px;
	border:						1px solid transparent;
	background-color:			transparent;
}
.arrow_item:hover {
	border:						1px solid hsla(297, 0%, 50%, 0.5);
	background-color:			hsl(297, 0%, 90%, 0.5);
}
.arrow_item:hover svg path {	fill:	hsl(210, 0%, 100%);	}
.arrow_light svg path	{		fill:	hsl(210, 30%, 70%);	}
.arrow_dark svg path	{		fill:	hsl(210, 100%, 30%);	}

.calendar_content {
	position:					relative;
	display:					flex;
    flex-flow:					column nowrap;
	justify-content:			flex-start;
	padding:					0px;
	margin:						0px;
	height:						100%;
	width:						100%;
	overflow:					hidden;
	
	font-size:					1.0em;
	font-weight:				600;	
	
	border-spacing:				0px;
	border:						0px solid #DDDDDD;
	border-radius:				10px;		
}
.calendar_content table {
	padding:					0px;
	margin:						0px;
	width: 100%;
	height: 100%;
	/* border-spacing:				9px; */	
}
.calendar_content thead {
	width: 100%;
	height: 100%;
	/* border-spacing:				9px; */	
}
.calendar_content table td {
	text-align:					center;
	vertical-align:				middle;
}
td.calendar_head {
	padding-bottom:				5px;	
	border-bottom:				2px solid hsl(195, 40%, 70%);
}
td.calendar_head_sat {
	padding-bottom:				10px;
	border-bottom:				2px solid hsl(297, 10%, 70%);
}
td.calendar_head_sun {
	padding-bottom:				10px;
	border-bottom:				2px solid hsl(297, 80%, 70%);
}
td.calendar_day_area {
	align-content:				baseline;
	padding-top:				2px;
	width:						100%;
}
td.calendar_day_area:hover {
	cursor:						default;
}
td.calendar_day_area a {
	text-decoration:			none;
}
#calendar_day_item:hover, #calendar_day_item *:hover {
			color:						hsl(195, 0%,  90%);
			background-color:			hsl(195, 80%,  60%);
			box-shadow: 				1px 1px  2px 1px rgba(0, 0, 0, 0.3);
}
.calendar_day_item {
	width:						auto;
	height:						100%;	
	aspect-ratio: 1/1;
	vertical-align:				middle;
	border-radius:				100%;
	box-shadow: 				1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}
		/*Kombi mit -> calendar_day_item*/
		.availableday {
			color:						#FFFFFF;
			background-color:			hsl(132, 100%, 27%);			
		}
		.normalday {
			background-color:			hsl(297, 20%, 100%);			
		}
		.today {
			color:						#FFFFFF;
			background-color:			hsl(195, 100%,  30%);
			box-shadow: 				1px 1px  2px 1px rgba(0, 0, 0, 0.6);
		}		
		/*td.today:hover {
			color:						hsl(195, 0%,  90%);
			background-color:			hsl(195, 80%,  60%);
			box-shadow: 				1px 1px  2px 1px rgba(0, 0, 0, 0.3);
		}		*/
		.saturday {
			color:						#FFFFFF;
			background-color:			#555555;
		}
		.sunday {			/* auch für gesetzliche Feiertage in Berlin */
			color:						#FFFFFF;
			background-color:			hsl(297, 80%, 70%);
		}
		.localholiday {	/* sonstige regionale Feiertage */
			background-color:			hsl(297, 20%, 70%);
		}		
div.calendar_day {
	display:					flex;
	-ms-flex-direction:			column;
	flex-direction:				column;
	justify-content: 			stretch;
    align-items: 				center;
	align-content:				center;	
	height:						60px;
	border:						0px solid #000;	
}
div.feiertagsname {
	position: absolute;
	bottom: 0px;
	display:					flex;
	-ms-flex-direction:			column;
	flex-direction:				column;
	justify-content: 			stretch;
	padding:					0px;
	margin-top:					0px;
	font-size:					7.5pt;
	text-align:					center;
	width:						100%;
	color:						hsl(297, 30%, 50%);	
	border:						1px solid hsl(297, 30%, 90%);
	z-index:5;
}

/* Verfügbarkeit: Kalendertag */
td.greenbox {
	box-shadow: 				 4px  4px 4px hsl(146,50%,50%),
								 4px -4px 4px hsl(146,70%,30%),
								-4px  4px 4px hsl(146,30%,70%),
								-4px -4px 4px hsl(146,50%,30%);
}

@media (max-width: 750px) {
	#seelsorge.menue .list {
		justify-content: space-evenly;
	}
	#seelsorge.menue .menu-item	{
		padding:					5px 2vw 5px 2vw;
		margin:						1vw;
    	max-width:					24vw;
		font-size:					80%;		
	}
	.content_seelsorge {
		padding:					0px;
		margin-top:					0px;
		width:						calc(100% - 0px - 0px);	/* Abzug von Padding+Border */
		border:						0px solid #DDDDDD;
		border-radius:				5px;
		background-color:			transparent;
	}
	.page_calendar {
		width:						calc(100vw - 30px - 2px);
		max-width:					700px;
	
		padding:					0px;
		margin:						0px;
		transform: scale(0.9);
	}
}
@media (max-width: 650px) {
	.page_calendar {
		width:						calc(100vw - 10px - 2px);
	
		max-width:					600px;
		transform: scale(0.8);
	}
}
@media (max-width: 550px) {
	.page_calendar {
		max-height:					550px;
		max-width:					550px;
		transform: scale(0.9);
	}
}
@media (max-width: 475px) {
	.page_calendar {
		
		max-height:					475px;
		max-width:					475px;
		
		transform: scale(0.6);
	}
}