:root {
	--hintergrund_body    : #ffffff;
	--schriftfarbe_body   : #000000;
	--hintergrund_nav     : #a1303f;
	--schriftfarbe_nav    : #ffffff;	
	--hintergrund_header  : #da004e;
	--schriftfarbe_header : #ffffff;
	--linienfarbe_header  : #000000;
	--hintergrund_article : #e9dfdf;

	--hintergrund_nav-hover  : #a1303f;
	--schriftfarbe_nav-hover : #e9dfdf;  	
  }

/* allgemeine Anweisung*/
* {
	font-family:Ariel, Helvetica, sans-serif;
}


body {
	background-color: var(--hintergrund_body);
	color: var(--schriftfarbe_body);
	font-size: 100%;
	min-width: 1650px;
	width: 75%;
	margin: auto;
}
hr {
	border-top:#000 1px solid;
	padding-bottom: 2em;

}
h1 {
	font-size: 2.5em;
}
h2 {
	font-size: 1.5em;
	margin: 0;
	padding-bottom: 0.5em ;
}
h2 a {
	text-decoration: none;
}
h3 {
	font-size: 1.1em;

}
p {
	font-size: 1.3em;
	line-height: 1.5;
}

p a{
	text-decoration: none;
	color: var(--schriftfarbe_body)
}

p a:hover{
	text-decoration: underline;
	color: blue;
}

nav{
	padding: 10px;  
	min-width:150px;
	position: fixed;
}
.nav--vertical{
	list-style-type:none;
	margin: 0;
	padding: 0;
}
.nav--vertical a{
	color:var(--schriftfarbe_nav);
}  
.nav--vertical a:hover{
	  color:var(--verticalnavlinkcolor-hover-font);
}
	
.nav--vertical li{
	  position: relative;
	  display:block;
}
.nav--vertical li.dropmenu ul{
	  display:none;
}
	
.nav--vertical li.dropmenu:hover > ul{
	  display:block;
	  
}
.nav--vertical li.dropmenu:after{
	  content: "";
	  position: absolute;
	  right: 10px;
	  top: 40%;
	  border-top: 4px solid transparent;
	  border-bottom: 4px solid transparent;
	  border-left: 4px solid var(--schriftfarbe_nav);
}
.nav--vertical > li a{
		text-decoration:none;
		padding:7px 10px;
		display:block;
		
}
.nav--vertical > li ul{
			list-style-type:none;
			margin: 0;
			padding: 0;
			position: absolute;
			left:0%;
}
.nav--vertical > li ul.level1{
			min-width:300px;
			top:100%;
			border: 1px solid #000;
}
.nav--vertical > li ul.level2{
			min-width:300px;
			left:100%;
			bottom: 0%;
			border: 1px solid #000;
}
		   
	
.nav--vertical > li > a,
.nav--vertical > li .level1 > li a,
.nav--vertical > li .level2 > li a{
	  background: var(--hintergrund_nav);
}

.nav--vertical li:hover a,
.nav--vertical li:hover li:hover > a{
		  background: var(--hintergrund_nav-hover);
}

header {
	background-image: linear-gradient( var(--hintergrund_nav), var(--hintergrund_header));
	margin: 0;
	width: 100%;
	padding-top: 30px;
}
header > div{
	width: 100%;
	height: auto;
	background-image: url('../img/logo_ballenstedt.svg?v=01.05.2022');
	background-size: 100%;
	background-repeat: no-repeat;
}
header div svg {
	width: 100%;
	height: 100%;
	font-size: 50px;
}
header div svg text{
	fill: var(--schriftfarbe_header);
}

article {
	background-color: var(--hintergrund_article);
	padding-bottom: 5em;
	border:#000 1px solid;
}
.linkfarbe {
	color:#0101DF;
}
.rundung{
	border-radius: 15px;
	box-shadow:-2px -2px 30px -5px #444;
}

.gross{
	width: 90%;
	margin: auto;
}
.mittel{
	width: 75%;
	margin: auto;
}
.klein{
	width: 50%;
	margin:auto;
}
.sehrklein{
	width: 25%;
}

.bild50{
	width: 50%;
	margin:auto;
}
.bild20{
	width:20%;
	margin:auto;
}
.margin25{
	margin-left: 25%;
}
.margin40{
	margin-left: 40%;
}
.bild25{
	width:25%;
	margin:auto;
	
}
.vorschaumittig{
	margin-left: 38%;
}

.zentriert{
	text-align: center;
}
.text{
	margin:0% 15% 0% 15%;
}
.border{
	border:#000 1px solid;
	border-radius: 15px;
	margin:2% 25% 2% 25%;
	padding: 0% 2% 0% 2%;

}
.borderkuj{
	border:#000 1px solid;
	border-radius: 15px;
	margin:2% 15% 2% 15%;
	padding: 0% 2% 0% 2%;

}

.termin ul{
	font-size: 1.2em;
	line-height: 0.6;
}
/* Anweisungen für Seite Kontakte */

.zwei {
    display: grid;
    grid-template-columns: 50% 50%;
	padding-bottom: 1em;
	
}

.drei {
    display: grid;
    grid-template-columns: 33% 33% auto;
	padding-bottom: 1em;
}
.inhalt > div {
	margin: 0 180px 0 90px  ;
	
}

.inhalt > h2{
	text-align: center;
	padding-right: 50%;
	border-top:#000 1px solid;
	padding-top: 2em;
}

.inhalt > h2:first-of-type{
	border-top: none;
}
div.spalten p:first-child {
    grid-template-columns: 1;
    padding: 15px;
    text-align: center;
}

div.spalten img{
	grid-template-columns: 2;
	padding: 15px;
	text-align: center;
}

div.spalten p:last-child{
	grid-template-columns: 3;
	padding: 15px;
	text-align: center;
	font-size: 1.0em;
	margin-left: 60px;
	margin-right: 50px;
}

/* Anweisungen für Seite Vermeldungen */

.vermeldung {
	border: 1px solid #333333;
	border-top: 1px;
	text-align: center;
	display: flex;
	margin: 200px;
	margin-bottom: 0px;
	margin-top: 0px;
	flex-direction: column;
}
.pfarrbrief{
	border: 1px solid #333333;
	text-align: center;
	margin: 5px 200px 0 200px ;
}
.aktuell{
	width: 40%;
}
.flex{
	display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
}
.franzigmark_flex{
	display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: stretch;
}

/* Anweisungfür Seite kirchenführer*/


.menu {
	margin: 0;
	padding: 0;
	top: calc(50vh - 80px);
	left: calc(87.5vw - 195px);
	position: fixed;
}
.menu li{
	list-style-type: none;
	margin: 1px;
	padding: 0;
	width: 165px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.menu li a,
.menu li a:active{
	display: block;
	color: 	var(--schriftfarbe_nav);
	text-decoration: none;
	background-color: #666;
}
.menu li a:hover{
	color: #f1f1f1 ;
	text-decoration: none;
	width: 100%;
	height: 100%; 
	background-color:rgb(10,90,145);
}

@media screen and (max-width:2200px) {
	.menu {
		left: calc(100vw - (100vw - 1300px) /2);
	}
}

@media screen and (max-width:1650px) {
	body {
		width: 100%;
		font-size: 100%;
		min-width: 800px;
		margin: 0;
	}
	nav * {
		font-size: 1.1em;
	}
	header div svg {
		font-size: 55px;
	}
	.menu {
		left: calc(100vw - 180px);
	}
}
@media screen and (max-width:1200px) {
	body {
		font-size: 100%;
	}
	nav * {
		font-size: 1.3em;
		min-width: 420px;
	}
	.nav--vertical > li > a,
	.nav--vertical > li .level1 > li a,
	.nav--vertical > li .level2 > li a{
		min-width: 420px;
	}
	.zwei{
		display: inline;
	}
	.drei{
		display: inline;
	}
	.border{
		margin:2% 10% 2% 10%;
	}
	.borderkuj{
		border:none;
		border-radius:none;
		margin:auto;
	}
	.klein{
		display: none;
	
	}

}


@media screen and (max-width:800px) {
	body {
		font-size: 150%;
	}
	nav * {
		font-size: 1.3em;
		width:200px;
	}
}
@media screen and (max-width:650px) {
	body {
		font-size: 100%;
	}
	
	nav * {
		font-size: 1.4em;
	}
}