* {
	margin: 0;
	border:0;
	padding:0;
	box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100%;
  height:auto !important;
  height:100%; 
  background-color: #eff0e8;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  text-align:center;
  font-size:100%;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -khtml-hyphens: auto;
  hyphens: auto;
}

.container {
	position: absolute;
	min-height: 100%;
	display:grid;
	grid-template-columns: 16% 12.6% 8.84% 5.44% 6.12% 11.56% 8.84% 12.6% 16%;
	grid-template-rows: 110px 240px 40px 0em 1fr minmax(25px , auto) auto 30px;
	margin: auto;
	width:100%;
	grid-template-areas: 
    "tp    tp    tp    tp    tp      tp      tp    tp   tp"
    "hd    hd    hd    hd    hd      hd      hd    hd   hd"
    "nav   nav   nav   nav   nav     nav     nav   nav  nav"
	"tit   tit   tit   tit   tit     tit     tit   tit  tit"
    "sl    main  main  main  main    main    main  sd   sd"
    "ft    ft    ft    ft    ft      ft      ft    ft   ft"
    "ad    ad    ad    ad    ad      ad      ad    ad   ad"
    "bs    bs    bs    bs    bs      bs      bs    bs   bs";
}

/*-----Meta-Styles-----*/
h1 {font-size: 2.0em;font-weight: normal;margin-bottom: 0px; padding: 0 0 1% 0; text-align:left;}
h2 { font-size: 1.5em; margin:3% 0 0.5em 0;font-weight: normal; text-align:left;}
h3 { font-size: 1.17em;line-height:1.5em;font-weight: normal; text-align:left;}
h4 { font-size: 1.1em; font-weight: normal; text-align:left;}
h5 { font-size: 1.0em;line-height:1.5em;font-weight: normal;}
h6 { font-size: 1.2em;margin:1em 0 -0.5em 0;font-weight: bold;text-align:left;}
p  { font-size: 1.0em;margin:0.5em;line-height:1.2em;}
a  { font-size: 1.0em; text-decoration: none;}

.ac {text-align:center;}
.cw{color:#ffffff} /*color weiß  */
.chg{color:#B1B988} /*color hell-grün */
.cdg{color:#646b4f;}  /*color dunkel grün */
.cdgg{color:#1e2221;} /*color dunkel grün-grau */
.co{color:#f49237} /*color orange */
.cb{color:#000000 !important;} /*schwarze Schrift*/

.inactiveSquare{
	background-image: url("../images/buttonInactiveLG.png");
	background-repeat: no-repeat;
	background-position: 0%, 50%;
	padding: 0px 17px;
}

#inactiveDarkMode{
	background-image: url("../images/buttonInactiveDG.png");
}
#activeDarkMode{
	background-image: url("../images/buttonActiveDG.png");
}
.squareMenue{
	background-image: url("../images/buttonInactiveDG.png");
	background-repeat: no-repeat;
	background-position: 0%, 50%;
	padding: 0px 17px;
}
.squareMenue:hover{
	background-image: url("../images/buttonActiveDG.png");
}

.squarePhonenumber{	
	background-image: url("../images/buttonActiveLG.png");
	background-repeat: no-repeat;
	background-position: 0%, 50%;
	padding: 0px 17px;
}

.activeSquare{	
	background-image: url("../images/buttonActiveLG.png");
	background-repeat: no-repeat;
	background-position: 0%, 50%;
	padding: 0px 17px;
}

.frameBorder{
	display: inline-grid;
	grid-row:1/9;
	grid-column:2/9;
	z-index: 2;	
}

/*-------Top-----------*/

.top{
	grid-row:tp;
	grid-column: 2/9;
	background-image: url("../images/Steine.jpg");
	text-align:left;
	opacity:0.95;
	}

.logoTop {
	grid-row:tp;
	grid-column: 2/10;
	z-index:2;
	width:80%;
	height:80%;
	margin: 1% 0 0 1%;	}

.phoneNumberTop{
	z-index:1;
	grid-row:tp;
	grid-column: 5/9;
	padding-top:1%;
	text-align:left;
	display: flex;
	justify-content: flex-end;
}

/*-------Header---------*/
.headerSmall{
	grid-column: 2/9;
	grid-row: hd-start/ nav-end;
    z-index:1;
    background-color: #646b4f;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position:bottom; 
	opacity:0.9;
	overflow:hidden;
}

.logo {
	z-index:2;
	width:80%;
	height:80%;
	margin: 10px 10px 10px 10px;
	background-repeat: no-repeat;
	background-size:contain;
	background-image: url("../images/logoW.png");
	display:block;
}


/*-------Content---------*/
.contentSmall {
	grid-row:4 /6;
    grid-column: 2/9;
	padding: 0.8em 5.5em 0.8em 5.5em;
	background-color:#ffffff;
	z-index:2;
}

#content {
	padding: 3% 1% 3% 1%;
	text-align:left;
}
#contentIndex {
	padding: 8% 4% 3% 4%;
	font-size: 1.3em; 
	line-height:1.8em; 
	text-align:left;
}

#contentKontakt{
	padding: 5% 4% 0% 4%;
}

/*  #portraitText{
	float: left;
	width: 72%;
	height:auto; 
	margin:4em 0 0 0;
	text-align: left;
	}
*/
#portraitText{
	padding: 5% 4% 2% 4%;
	text-align:left;
}

/*-------ContentCenter---------*/
.cc{
	display: flex; 
	justify-content: center;  
	align-items: center;
}

#quelle{text-align:right;}

/*-------Menue---------*/
.navigation{
	z-index:3;
	grid-row: nav;
    grid-column: 2/9;
}
.navBar{
	width: 100%;
	display:flex;
    justify-content: space-between;
    bottom:0;
	justify-content: flex-end;
	hyphens: none;
}
.navItem{
	padding:5px;
	float:left;
}
.navItem a, .navItemTop a, .footItem a, .footItem p{
	color: white;
	text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  float:left;
}
.dropdown:hover .dropItem {
  display: block;
  width:210px;
}
.dropItem {
  display: none;
  position: absolute;
  background: rgba(177,185,136,1.0);
  padding: 5px 5px;
  z-index: 1;
}
.dropdown {
	position: relative;
	display: block;
}

.dropItem a{
	color: black;
	text-decoration: none;
}

.dropItem a:hover{
	color:#1e2221 !important;
}

/*-------Footer---------*/
.footer {
	grid-area:ft;
    background-color: #646b4f;
    width:100%;
	Display:flex;
    justify-content: center;
    text-align:left;
}
.footerSmall {
	grid-column: 2/9;
	grid-row:ft-start/ad-end;
    background-color: #ffffff;
    width:100%;
}

#phoneButton{
	background-position: 0px 7px;
	line-height:1.6em;
	font-weight: bold;
	color: #ffffff;
}

#footLogo{
	z-index:3;
	position: absolute;
	width: 32px;
  	height: 32px;
  	left: -16px;
    bottom: -16px;
}

.footLogoBase{
	grid-column:8/9;
	grid-row:ad;
	position:relative;	
}
#footLogoBase{
	z-index:3;
	position:absolute;
	width: 32px;
  	height: 32px;
    bottom: -16px;
  	right: 3em;
}

/*----------Adressen------*/
.adress{
	grid-column:2/9;
	grid-row:ad;
    padding:1.5% 0% 0.5% 1%;
    position: relative;
}
.adressItem {
	z-index:3;
	width:33%;
    float:left;
	text-align:center;	
	color: #B1B988;
	padding: 5px 1.5% 5px 1.5%;
	line-height: 1.5;
}
#kontaktAdr{
		display: flex;
		flex-direction:row;
		justify-content: space-evenly;
		align-items: flex-start;
	}
	
#kontaktAdress{
	text-align:left;
	padding:1.5% 0% 0% 0%;
	width:auto;
}
.proLogAdress {
	grid-column: 2/9;
	grid-row:ft-start/ad-end;
    background-color: #646b4f;
	padding-top: 1.3em;
}
#tagUndNacht{line-height: 1.5em; margin-top:2.0em;}
/*-------Base---------*/
.baseSmall{
	grid-column: 2/9;
	grid-row:bs;
	background-image: url("../images/SteinHintergrundBottom.jpg");
	display:flex;
	justify-content: space-around;
	margin:0 4px 4px 4px;
	z-index:2;
}

.baseItem a{
	color: #828d5e;
	text-decoration: none;
	font-size: 0.8em;
}
/*-------Bilder----------*/
#dienstleistungen{
    background-image: url("../images/Dienstleistungen.jpg");
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
}
#kontakt{
    background-image: url("../images/Kontakt.jpg");
	background-position: bottom; 
	background-repeat: no-repeat; 
	background-size: cover;
	}
#ratgeber{	
    background-image: url("../images/Stimmung8c.jpg");
	}
#stimmung{
    background-image: url("../images/Stimmung8a.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position:bottom; 
	opacity:0.9;
}

.bildBox{
	width: 95%; 
	height:auto; 
	margin:0 0 2em 2.5%;
	text-align:left;
	}

#portraitBox{
	float: right;
	width: 23%; 
	height:auto; 
	margin:4em 0 0 0;
	}
#portrait{
	max-width: 95%;
	max-height: 95%;
	}
#portraitSubTitle{
	color:#1e2221;
	line-height: 150%;
	padding-top:0.4em;
}

.clearfix:after {
	content: "";
	clear: both;
	display: table;
	}

.frame{
	border: 4px solid #ffffff;
	box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.4), 0 4px 10px 2px rgba(0, 0, 0, 0.2);
	}

.frameTotal{
	border: 4px solid #ffffff;
	box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.15);
	}
	
.leftImage {
	float: left;
	margin:0.7em 1.5em 1em 0;
	width: 13em; height: auto;
	} 

.rightImage {
	float: right;
	margin:0.7em 0 1em 1.5em;
	width: 13em; height: auto;
	} 
#trauerfall{
	display: flex;
	flex-flow: wrap;
}

#trauerfallA{
		display: inline-flex;
	}

/*---image-slider--*/
.galleryImg{
	object-fit: fit;
    width: 100%;
    height: 100%;
}

#gallery{
  position: relative;
  width:100%; height: 100%;
}
#roxel{
	object-fit: cover; 
}

#gallery figure {
  position: absolute;
  bottom: 0%;
  left: 0;
  z-index: 1;
  width:100%; height: 100%;
}

#gallery figcaption {
  position: absolute;
  left: 1.5em;
  top: 1.5em;
  color:#ffffff;
  font-size: 1.5em;  
}

#gallery figure {
  animation-name: imageGallery;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

@keyframes imageGallery {
    0% {opacity: 0;}
   10% {opacity: 1;}
   20% {opacity: 1;}
   30% {opacity: 0;}
  100% {opacity: 0;}
}	

#gallery figure:nth-of-type(1) {
  animation-delay: -2s;
  opacity: 0;
}

#gallery figure:nth-of-type(2) {
  animation-delay: 3s;
  opacity: 0;
}
#gallery figure:nth-of-type(3) {
  animation-delay: 8s;
  opacity: 0;
}
#gallery figure:nth-of-type(4) {
  animation-delay: 13s;
  opacity: 0;
}
#gallery figure:nth-of-type(5) {
  animation-delay:18s;
  opacity: 0;
}
#gallery figure:nth-of-type(6) {
  animation-delay: 23s;
  opacity: 0;
}

/*---Listen---*/
ul {
	list-style-position: outside;
	list-style-image: url("../images/buttonActiveLG.png");
	padding: 15px 0 15px 10px;
	margin: 0 0 0 3%;
	column-gap: 20px;
	line-height: 1.4em;
}
ul li {margin:0 0 0.2em 0;}

ol {
	padding: 0 0 0 1.5em;
}
ol li{
	padding: 0 1.5em 0.5em 0.5em;
}

.title{
		display:none;
		grid-column: 2/9;
		grid-row:tit;
		font-size: 1.7em; 
		padding: 1.3em 0 0.2em 6vw;
		font-weight: normal;
		color:#646b4f;
		background-color:#ffffff;
		text-align:left;
}

/*----Media-Queries---*/
@media only screen and (max-width: 760px) {
	#trauerfallA{display:none;}
	#dokumenteTrauerfallA{display:none;}

	body {
	  font-size:60%;
	}
	h1 {font-size: 1.6em; padding: 0 0 0.3em 0%;}
	h2 { font-size: 1.6em;}
	h3 { font-size: 1.5em;line-height:1.5em;}
	h5 { font-size: 1.2em;}
	ul {	
	font-size: 1.0em;
	list-style-image: url("../images/buttonActiveLGsmall.png");
	margin: 0 0 0 2%;
	padding: 0.5em 0 0.5em 10px;
	line-height: 1.2em;
	}

	ul li {margin:0 0 0.5em 0;}
		
	.container {
	grid-template-columns: 0% 29.6% 8.84% 10.44% 16.12% 12.56% 8.84% 12.6% 0%;
	grid-template-rows: 50px 80px 30px auto 1fr minmax(25px , auto) auto 22px;
	}
	
	#phoneButton{
		line-height:1.5em;
		font-weight: normal;
	}	

	#phoneNumber{
		width: 135px;
		float:right;
	}
	
	.squarePhonenumber{	
		background-image: url("../images/buttonActiveLGResponsive.png");
		padding: 2.0px 11px;
		font-size: 1.0em;
	}
	
	#menueButton {padding-bottom:0.3em;}
	#menueSquare {font-size:1.6em;}
	
	#contentIndex{
		font-size: 1.7em; 
		line-height:1.4em; 
	}

	.contentSmall {
		grid-row:5/6;
		padding: 3px 4% 2% 6vw;}
		
	#content {padding: 3px 0 0 0;}
	
	#portraitText{padding:3px 4% 2% 0;}
	
	.title{
		display:block;
	}

	.navigation{
		grid-column: 6/9;
		float:right;
	}	
	
	.menueItems {
		display: none;
		position: absolute;
		background-color: rgba(177,185,136,1.0);
		padding: 4px 0 0 0;
		margin-right:4px;
		z-index: 1;
		right:4px;
		left:auto;
		width:180px;
		font-size: 1.5em; 
		line-height:1.4em;
	}
	.menueItems a{
		color: black;
		text-decoration: none;
		font-size: 0.85em;
	}
	.menueItems a:hover,.menueItems a:active{
		color:#1e2221 !important;
	}
	.activeSquare{	
		background-image: url("../images/buttonActiveDG.png");
	}
	.inactiveSquare{
		background-image: url("../images/buttonInactiveDG.png");
	}
	.buttonArrow{
		background-image: url("../images/buttonArrow.png");
		background-repeat: no-repeat;
		background-position: 0%, 50%;
		padding: 0px 17px;
	}
	.buttonArrowActive{
		background-image: url("../images/buttonArrow.png");
		background-repeat: no-repeat;
		background-position: 0%, 50%;
		padding: 0px 17px;
	}
	.squareMenue{
		background-image: url("../images/buttonInactiveDGsmall.png");
		padding: 0px 12px;
	}
	.squareMenue:hover,.squareMenue:active{
		background-image: url("../images/buttonActiveDGsmall.png");
	}	
	.inactiveSquare:hover, .inactiveSquare:active{
		background-image: url("../images/buttonActiveDG.png");
	}
	.buttonArrow:hover , .buttonArrow:active{
		background-image: url("../images/buttonArrowActive.png");
	}
	.dropItem {
		position: relative;
		left:auto;
		float:left;
		right:4px;
		margin:0 0 -10px 0;
		width: 160px;
	} 	
	#ratgeberButton a{
		float:left;
		padding-right: 30px;
	}	
	.dropItem a{
		margin-left:10px;
		line-height:0.85em;
	}
	.proLogAdress {
		padding: 0.8em 0 0 0;
	}
	
	.handynummer{
		font-size:1.0em;
	}
	
	.adress{
		padding:0% 0% 0.5% 0%;
	}
	
	.adressItem {
		width:33%;
		text-align:center;	
		padding: 0% 0% 1.0% 2.0%;
		line-height: 1.5;
		font-size: 0.79em;
	}
	
	#AdressAlb {
		width:33%;
		padding-left: 2.0%;
	}
	
	#AdressMeck {
		width:34%;
		padding-right: 2.0%;
	}
	#gallery figcaption {
		left: 1.5em;
		top: 1.0em;
		font-size: 1.1em;  
	}
	
	#contentKontakt{
		padding: 1% 4% 0% 4%;
	}
	
	#kontaktAdress{
		line-height: 1.5;
		font-size: 1.0em;
		padding: 0.8em 0 1em 0;
		width: 20em;
	}
	
	#kontaktAdr{
		flex-direction:column;
		align-items: center;
	}
	

	#tagUndNacht{margin:1em 0 0 0; font-size: 1.3em;}
}


@media only screen and (min-width: 581px) and (max-width: 760px){
	#trauerfallA{display:none;}	
	#dokumenteTrauerfallA{display:none;}

	.container{
		grid-template-rows: 70px 100px 40px auto 1fr minmax(25px , auto) auto 22px;
	}
	body {
		font-size:65%;
	}
	.navBar{
		font-size:85%;
	}
	.title{
		display:block;
	}
	#kontaktAdr{
		flex-direction:column;
		align-items: center;
	}
	.adressItem {
		font-size: 1.0em;
	}
	#phoneButton{
		font-size:1.2em;
		font-weight: normal;
	}
	#phoneNumber{
		width: 225px;
		float: right;
	}
	.squarePhonenumber{
	padding: 0px 17px;
	}
}


@media only screen and (min-width: 761px) and (max-width: 1380px) {
	#menueSquare{display: none;}
	.title{display: none;}
	#trauerfallB{display:none;}
	.container{
		grid-template-columns: auto 144px 124px 58px 65px 122px 114px 134px auto;
		grid-template-rows: 95px 190px 40px 0em 1fr minmax(25px , auto) auto 22px;
	}
	body {
		font-size:90%;
	}
	.navBar{
		font-size:120%;
	}
	.squarePhonenumber{	
	padding: 2px 17px;
	}
	#contentIndex{
		font-size:140%;
	}
	#portraitText{
		font-size:100%;
	}
}



@media only screen and (min-width: 1381px) {
	#menueSquare{display: none;}
	.title{display: none;}
	#trauerfallB{display:none;}
}