@charset "utf-8";
/* CSS Datei */

:root {
	font-size: clamp(0.8rem, 2vw, 1.2rem);
}
body {
	margin: 0;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	padding: 4px;
	box-sizing: border-box;
	overflow: auto;
	background-image: linear-gradient(to right, #0c08, #00c8);
	display: grid;
	grid-template: "logo logo"      auto
				   "losung losung " auto
				   "menu stamm"     auto
				   "main main"      1fr /
                      1fr 1fr;
	}
body > header 
	{
  		grid-area: logo;
  		width: 100%;
  		box-sizing: border-box;
  		display: flex;
  		justify-content: space-around;
  		background-color: linen;
		overflow:hidden;
	}
body > header .titel 
	{
  		flex: 0 1 auto;
		align-self: center;
  		text-align: center;
  		font: bold 2rem sans-serif;
 		text-shadow: 10px 11px 12px dimgray;
	}
body > header .titel span 
	{
  		color: purple;
  		display: inline-block;
		width: max-content;
		max-width: 100%;
	}
body > header img 
	{
		max-height: 80px;
		min-width: 200px;
  		object-fit: contain;
		margin-bottom: 0.5em;
	}

.jahreslosung 
	{
  		grid-area: losung-start / losung-start / losung-end / menu1-end;
  		padding: 1em 0.5em;
  		font-size: 0.9em;
		background: linear-gradient(90deg, /*#8b1c62*/ #8B008B, #551a8b);
		color: white;
	}

.jahreslosung h2
	{
		margin: 0;
  		font-size: 1.2em;  
		padding-bottom: 0.4em;
	}
	
figure.spruch
	{
		margin: 0;
		font-size:1em;
	}
	
.spruch blockquote
	{
		margin: 0;
	}
	

nav 
	{
		/* text-align: right;
  		padding-right: 2em; */
 	}
nav ul, .inri ul
	 {
  		list-style: none;
		margin: 0;
		padding: 0;
	}

.main-navigation 
	{
		display: contents;
	}
/* Quirk im Firefox: display:contents auf einem details-Element verhindert das Ausblenden der Kinder */
.main-navigation:not([open]) :not(summary)
	{
		display: none;
	}	
.main-navigation summary
	{
		grid-area: stamm;  /* Prinzipielle Position: im Stamm */
		align-self: start; /* oben */
		justify-self: end; /* rechts */
		transform: translate(-0.5em, -0.8em);  /* etwas vom Rand weg und nach oben */
		border-radius: 0.3em;
		background-color: lightgray;
		padding: 0.1em 0.2em;
		border: 1px solid black;
	}
.main-navigation summary::marker { content: "â‰¡ "; font:1.2em sans-serif; }
.main-navigation[open] summary::marker { content: "X "; }

.main-navigation nav
	{
		background-color: #0008;
		font-size: 0.9em;
		padding-top: 1em;
	}
.main-navigation nav > ul
	{
		width: 100%;
		box-sizing: border-box;
	}

.main-navigation a
	{
		display: block;
    	color: white;
    	text-align: center;
		text-transform: uppercase; 
    	text-decoration: none;
		font-weight: bold;
	}
nav li a
	{
		padding: 1em 1em;
		margin: 0.1em 0.5em;
   	}
nav li a:hover
	{
    	color: gold;
		background: darkmagenta /* mediumvioletred */;
  	}

nav ul li:hover > ul 
	{
  		display:block;
  		color:gold;
  		padding-left:1rem;
		margin-top: -0.1em;
	}

.balken
	{
  		grid-area: y-start / y-start / y-end / m-over;
  		background: linear-gradient(180deg, /*#8b1c62*/ #8B008B, #551a8b);
   		border-top: 1px solid black;
  		border-bottom: 1px solid black;
	}

.center 
	{
  		grid-area: mitte;
  		/*  text-align: center; */
	}

.center, nav 
	{
		/*  line-height: 200%;  */
	}

#balken-nav
	{
		grid-area: menu;
	}
#stamm-nav
	{
		grid-area: stamm;
	} 
	
#stamm-nav li.abgesetzt
	 {
  		margin-top: 0.5em;
	 }
#stamm-nav li.pfarrbereich
	{
		text-align: left;
	}
#stamm-nav li.gesetzt
	 {
  		margin: 0em 0 0em 1em; 
		padding:0;
	 }  

main
	 { 
		position: relative;
   		background: linen;
		grid-area: main;
 		border: 1px solid black; 
		border-radius: 20px;
		margin: 1em ;
		padding: 0 1em;
	} 
/*   __________________Infobox
				
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#c30; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:1.5em; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:1em;
    border:1px solid #c30; color:blue; background:white; }
----------------------------------------------    */

/*   ---------------------------Seiteneinteilung fÃ¼r alle Seiten --------------------*/
main > header 
	{
		/*background: wheat;*/	
		margin: 0.5em;
		text-align: center;	
	}
main > header h1 
	{
		color: darkgray;
		margin: 0.5em auto;
		/* h1 Ã¼berskalieren damit sie auch auf sehr schmale Viewports passt */
		font: bold italic calc(1.2em + 2vw) Arial,Helvetica,sans-serif;
		/* em ist fontsize der h1, also sparsame em Werte nehmen! */
		text-shadow: 0.12em 0.12em 0.1em #777;
	}

main > header p 
	{
		margin: 0 0.5em ;
		font: bold 1.1em serif;
	}

main h2 
	{
		font-size: 1.4em;
	}
main h3 
	{
		color: purple;
		background: #D8D6D6;
		font-size: 1.2em;
		text-align: center;
		/*  background: orange;  */ 
		
	}
	
main em
	{
		color: red;
		font-style: normal;
	}
/* --------------------------------zusÃ¤tzlich index.htm + bereichx.htm ________________*/

.startpage
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		align-content: start;
	}
.startpage article
	{
		margin-left: auto; 
		margin-right: auto;	
	}
.anhaltspunkt
	{
		margin: 0 auto;
		text-align: center; 
	}
.anhaltspunkt img
	{
		width: 400px;
		max-width: 90%;
		border: 4px solid grey;
		border-radius: 1em;
	}
.anhaltspunkt figure
	{
		margin: 0;
	}
.anhaltspunkt figure blockquote
	{
		font-weight: bold;
		margin: 0 0.5em;
	}
	
.anhaltspunkt a.andacht
	{
		display:block;
		margin-top: 1em;
		font-weight: bold;
	}
	
dl.gottesdienste
	{
		margin-left: 1em;
		text-align: left;
	}
dl.gottesdienste dt
	{
		font-weight: bold;
	}
dl.gottesdienste > dd
	{
		margin-left: 1em;
	}
dl.gottesdienste dl
	{
		margin-top: 0;
	}

@media (min-width: 45em)
{
	:root
	{
		font-size: clamp(0.8rem, 1.7vw, 1.2rem);
	}

	body
		{
			background-image: linear-gradient(to right, #0c08, #00c8), 
						      url(../bilder/hintergrund.jpg);
			min-height: 100vh;
			grid-template: ". . losung logo ." auto
                           "y y stamm menu m-over " auto
                           ". . stamm  main ." 1fr /
                           1fr 3em min-content minmax(20em, 60em) 1fr
		}
	.jahreslosung
		{
			grid-area: losung;
		}
	body > header img 
		{
			max-height: 100%;
		}
	.main-navigation summary
		{
			display: none; 
		}
	#balken-nav, #stamm-nav 
		{
			background-color: unset; 
		}
	#balken-nav
		{
			padding: 0.5em 0;
		}
	#balken-nav ul
		{
			display: flex;
			flex-flow: row;
			justify-content: center;
		}
	#balken-nav a
		{
			padding: 0.1em 0.5em;
			font-size: 0.8em;
		}
	#stamm-nav
		{
			padding-top: 4em;
			background: linear-gradient(90deg, /*#8b1c62*/ #8B008B, #551a8b);
			border-left: 1px solid black;
			border-right: 1px solid black;
		}
	#stamm-nav .pfarrbereich a
		{
			text-align: left;
		}
}

/* Dies mÃ¼sste eigentlich eine Container-Query werden... */
/* Zweispaltige Startseite wenn genug Platz ist */
@media (min-width: 60em)
{
	.startpage
		{
			grid-template-columns: 1fr 1fr;
			align-items: start;
			column-gap: 1em;
		}
	.startpage header
		{
			grid-column: 1 / span 2;
		}
}

/* Display-Optimierungen bei sehr schmalen Viewports */
@media (max-width: 20em) {
	body {
		padding: 0;
		grid-template: "logo" auto
				   "losung " auto
				   "menu" auto
				   "stamm" auto
				   "main" 1fr / 1fr ;
	}
	body > header {
		padding-top: 4px;
		flex-wrap: wrap;
	}
	.main-navigation summary {
		grid-area: menu;
	}
}

@media (max-width: 200px) {
	/* Viewport schmaler als das GLH-Bild */
	/* Zulassen dass das Bild verkleinert, und Umbruch in den spans erlauben */
	body > header .titel span {
		width: unset;
	}
	body > header img {
		min-width: unset;
		max-width: 100%;
	}
}


.ab	{
		display: flex;
		 flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 100%;
		/* background: silver; */
	}
.bb
	{
		wxidth: 25em;
		margin-bottom: 2em;
	}
.bb h2, .cc h2, .dd h2, .musik h2
	{
		font-size: 1.8vw;
		margin: 0.5em 0  0 1em;
		
	}
.bb img
	{
		width: 50%;
		margin: 1em 1em  0 1em;
		border-radius: 2em;
	}

.bb h3, .cc h3
	
	{
		color: purple;
		background: #D8D6D6;
		font-size: 1.4vw;
		/* background: orange;  */
		margin: 1em 0 0 1em;
	} 

.bb h5
	{
		margin-top: 1.3em;
		/*background: salmon;*/
		font-size: 1.2vw; 
		margin: 0 0.5em 0 0.5em;
	}
.bb h6
	{
		margin: 0.5em 0 0  0.5em; 
	}
.bb a
	{
		font-size: 1.3vw;
		color: slategray;
		margin-left: 2em;
		
	}

.cc
	{
		/* background: green; */
		width: 45%;
		color	
	}
.cc p, .bb p
	{
		font-size: 1.1vw;
		color: #444;
	}
.cc b
	{
		font-size: 1.0em;
		color: dimgray;
	}
 .cc h4
	{
		background: #D8D6D6;
		font-size: 1.3vw;
		color: #474545;
		margin-top: 0.4em;
		margin-bottom: 1.5em;
		
	} 
.cc ul
	{
		margin-top: 0.6em;
		
	}
.cc a
	{
		color: maroon;
	}
.cc a:hover
	{
		color: purple;
	}
/*  ---------------------------------------Ende Zusatz index.htm-------------------*/
/*  ------------------------------------------bereichweissandt.htm, bereichgoerzig.htm, bereichwoerbzig.htm-------------------------------  */

.cca			/* Karteikarten der einzelnen Kirchen */
	{
		min-width: 15%;
		
	}

.cca figure   
	 {
    		background: lavender;
		height: 15rem;
    		max-width:160px;
    		max-height: auto;
		padding: 1em 1em 3em 1em;
    		border: 4px solid silver;
    		margin: 0 2em 2em 2em;   
		 box-shadow: 10px 0px 25px #555;
    		transform: rotate(1deg);
		@import url('https://fonts.googleapis.com/css2?family=Rock Salt&display=swap');
	}  

.cca figure img
	 {
		text-align: center;
    		max-width: 150px;
    		margin-left: 0.3em;
	}
.cca figcaption 
	{
    		font-family: 'Arial', cursive;
    		color: #666;
    		padding-top: 0.5em;
    		line-height: 1.5em;
		font-size: 1.2em;
    		text-align: center;
	}   
.cca figure figcaption a
	{
		color: /*dodgerblue;*/  darkmagenta;
		text-decoration: none;
	}
figure figcaption a:hover
	{
		color: /*darkorchid;*/ deeppink;
	}

/*--   kontakt.htm  impressum.htm                         ---------------*/

.dd
	{
		text-align: justify;
		margin: 0 1.5em  0  1.5em;	
	}
.dd h3 
	{
		color: purple;
		background: #D8D6D6;
		font-size: 1.4vw;
		/*  background: orange; */
		margin: 1em 0 0 1em;	
	}

/* --------------------------------------------gottesdienst.htm ------------------------*/

@media screen and (min-width: 40em) {
main .gdtabelle  {	margin:0;
		padding:0;
		/* background: yellow; */
		width: 100%;
				
	}

main .gdtabelle table
	{
		margin: 0 0 1em 10%;			
		
	}
	
main .gdtabelle table, th, td {
		
  		border: thin solid black;
  		border-collapse: separate;
  		background-color: #F8ECE0;
		border-spacing: 0.3em;
		font-size: 1.2vw;
	}

main .gdtabelle th, td 	
	{
  		padding: .2em .5em;
  		border-radius: .2em; 
		background: wheat; 
	} 

main .gdtabelle  table  td 	
	{
  		font-style: bold;
  		text-align: center;
  		box-shadow: inset .1em .2em 3em -.2em  #666;  
		 font-size: 1.0em; 
	}   

main .gdtabelle td:empty
	{
 		 box-shadow:  inset .1em .2em 3em -.2em rgba(0,0,0,.5);
	}

main .gdtabelle tbody tr:nth-child(even) td { 
  		background-color: #e4ebf2; 
  		color: #000; 
	}
}

/*  ---------------biendorf.htm, coermigk.htm, coesitz.htm u.s.w. -----------------  */ 

#button 
	{
		display: inline-block;
		width: 100%;
		height: auto;
		background: linear-gradient(90deg, /*#8b1c62*/ #8B008B, #551a8b);
		border: 4px solid black;
		text-align: center;
		padding-top: 0.5em;
	}
#button img
	{
		width: 10rem;
		height: auto;
		
	}

#klick
	{
		color: maroon;
		font-weight: bold;
		margin: 0.5em 3em;
	}

.kibilder
	{
		background: silver;
		display: flex;
		justify-content: space-around;
	}

/* -----------------------------konzerte.htm---------------------*/
.konzert
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		gap: 2em;
		/* align-items:stretch; */
	}
 .textbox1 	
	{
		
	}
 .textbox1 img	
	{
		margin: 0 1em 0.3em 1em;
		float: left;
	}

/* ----------------------------------wir.htm----------------------------------*/
.spalten
	{
		display: flex;
	}  
 .box1
	{
		margin: 2em 1.5em 3em 1em;
		width: 70%;
	} 
.box1 h3 
	{
		color: purple;
		background: #D8D6D6;
		font-size: 1.4vw;
		/*  background: orange; */
		margin: 1em 0 0 1em;	
	}
.box2
	{
		width: 15vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		text-align: center;
		background: silver;
	}
.box2 img
	{
		
		width: 70%;
		
	} 

/*----------------------------------------------------------------------------rueckblick.htm---------*/

.rueck p
	{
		margin: 0 2em 1em 1em;	
	}
 .image-mosaic1, .image-mosaic2
	 {
  		display: grid;
  		gap: 1rem;
  		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  		grid-auto-rows: 240px;
		max-width: 98%;
		margin: 0.8em 0 0 0 ;
	}

.card 
	{
  		display: flex;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		background: #353535;
  		font-size: 3rem;
  		color: #fff;
  		box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  		height: 100%;
  		width: 100%;
  		border-radius: 4px;
  		transition: all 500ms;
  		overflow: hidden;
  		background-size: cover;
  		background-position: center;
  		background-repeat: no-repeat;
  		padding: 0;
  		margin: 0;
	}

  .card-tall 
	{
    		grid-row: span 2 / auto;
  	}

  .card-wide
	{
    		grid-column: span 2 / auto;
  	}
   /* _________ gemeindeleben.htm----------*/

.ee	
	{
		margin: 0 10% 0 10%;
	}

.ee ul
	{ 
		display: flex;
		list-style: none;
		justify-content: space around;
		
		
	}	
.ee li
	{ 
		border: 2px solid silver;
		flex: 1;
		text-align: center;
		background-color:burlywood;
		padding: 2%  0;
		font-weight: bold;
	}			


.image-mosaic3 {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	grid-auto-rows: 100px;
	max-width: 98%;
	margin: 0.8em 0 0 0 ;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #353535;
	font-size: 3rem;
	color: #fff;
	box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
	height: 100%;
	width: 100%;
	border-radius: 4px;
	transition: all 500ms;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0;
}



/* -----------------------------------------kinder htm----------------------------------------------*/
.buttonkinder ul 
	{
	   display: flex;
	  
	   
	   	}
.buttonkinder ul li
	{
	    flex-gap: 2em;

	   	}

.galerie ul, li {
	margin: 0.1em;
	padding: 0.1em;
}

li {
	display: inline-block;
	list-style-type: none;
	width: 45%;
}

img {
	padding: 0;
	margin: 0;
	width: 100%;
	/* Bild passt sich an verfügbaren Raum im li ann */
}

a {
	padding: 0.1em;
}

a:focus,
a:hover {
	background: #09c;
}
/* Large screens */

@media all and (min-width: 35em) {
	li {
		width: 10em;
	}
	.details {
		position: absolute;
		right: 10%;
		top: 10%;
		background-color: #F1F3F4;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		padding: 1em 1em .2em;
		width: 25em;
		max-height: 20em;
		overflow: auto;
		display: none;
	}
	.details img {
		width: 90%;
	}
	.details:target {
		display: block;
	}
	.close {
		width: 0;
		heigh: 0;
		border: 0;
		text-shadow: none;
		color: transparent;
	}
	.close::after {
		position: absolute;
		top: 1em;
		right: 1em;
		content: "X";
		color: white;
		background: #c32e04;
		font: bold 1em/150% Georgia, Times, serif;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		display: block;
		text-align: center;
		width: 1.5em;
		height: 1.5em;
		padding: 0.2em 0 0 0em;
	}
}



