/*General Style V1*/


body {
	background:#FACB9C;
	font-size:100%;
	margin:0em, auto;
	padding:0em;
	position: relative;
	/*outline:red solid 1px;*/
}


h1 {
	font-size:2.0em;
	line-height:3.0em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	margin:0em;
}
h2 {
	font-size:1.563em;
	line-height:1.8em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	margin:0em;
	padding:0em 1.25em 0em 1.25em;
	text-align:center; 
}
p {
	line-height: 1.25em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 100;
	color: black;
	margin: 0em;
	padding: 1em 1.25em 1em 1.25em;
	text-align:center;
}
b {
	line-height: 1.25em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: Black;
	margin: 0em;
	padding: 1em 1.25em 1em 1.25em;
	text-align:center;
}
ul {
	margin:0px;
	padding:0px
}
li {
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	line-height:1.25em;
	margin:0em;
	padding:0em; 
	margin:0.313em 0em 0.313em 0em; 
}
table {
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:100;
	color:black;
	line-height:1.25em;
	margin:0em;
	padding:0em 1.25em 0em 1.25em; 
	margin:0.313em 0em 0.313em 0em; 
}
/*img {
	width:inherit; 
	max-width:100%;
	box-shadow:0px 0px 10px -5px #4c4948; 
} */

a {	
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	color:#DD0606;
}
/* für den rauf Pfeil 
a.backtotop{
	display:none; 
	width: 2em;
	height:2em;
	position: fixed;
	
	left: 0.5em;
	bottom: 1em;
	
	background:rgb(231, 218, 231)url('../Images/up-arrow.png')no-repeat fixed center;
	text-indent: -9999px;
	border-radius: 5px;
	border-bottom: 0.188em solid #DD0606;

	}
a:hover.backtotop {
	background-color: #F19049;
}
*/


/* Header LOGO */

#headerlogo {
	display:block;
	width:100%;
	max-width:1000px;
	margin:1.25em auto;
	Padding:0em;

}
#headerlogo img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height: 450px; 
	box-shadow:0px 0px 10px -5px red; /*#4c4948 */
	border-radius:5px;
}
#headerlogo article {
	display: inline-block;
	width:75.76%;
	vertical-align:top;
	margin: 0em;
	padding: 0em;
}
#headerlogo aside {
	display: inline-block;
	width:17.23%;
	margin-left:3%;
	vertical-align:top;
	padding: 0em;
}

/*TOPMENUE*/

#menubar {
	display:block;
	height:2.5em;
	margin-top:0em;
}
#menubar img {
	width:auto;
	height:2em;
	max-width:100%;
	}

#menubar ul {
	display:block;
	width:96%;
	max-width:1000px;
	margin: 0.25em auto;
	Padding:0em;
}
#menubar ul li {
	display:inline-block;
	float: left;
	/* outline:red solid 1px; */
}
#menubar ul li a {
	display: inline-block;
	padding: 0em 2em;
}

#menubar ul li a.menubotton {
	display:none;
} 


/* Header */
header {
	display:block;
	background:rgb(231, 218, 231);
	text-align:center;
	margin:0.5em 0.5em 0.5em 0.5em;
	border-radius:5px;
}
/*NAVI 

*/
nav {	
	height:3.0em;
	max-width:100%;
	display:block;
	text-align:center;	

}
nav ul {
	display:block;
}
nav ul li {
	display:inline;
	margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
	color:#DD0606;
	font-size:1.125em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.938em;
	transition:background 0.2s;
	-webkit-transition:background 0.2s;
}
nav ul li a:hover {
/*	background:#B39DB0; */
	background:#F19049;
	border-bottom:0.188em solid #DD0606;
	border-radius:5px;
}
nav ul li a.active {
/*	background: rgb(231, 218, 231); */
	border-bottom: 0.188em solid #DD0606;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    margin: 0.3em 0;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
	margin: 5px 0;
    background-color: #DD0606;
}

/*	für die NAV die am oberen Bildrand bleibt beim runterscrollen */
/*
.fixed-nav
	{
	position:fixed;
	height:3.0em;
	width:100%;
	top: 0%;
	display:block;
	background:#FACB9C;
	text-align:center; 
	
} */

/* CONTENT AREA */

div {
	display:table;
	width:96%;
	max-width:1000px;
	margin:1.25em auto;
	Padding:0em;
	max-height: 225px;
	text-align:center;
}
figure {
display: table-cell;
}
img {
	width:inherit;
	max-width:100%;
	max-height: 225px; 
	margin-left:0%;
	/* box-shadow:0px 0px 10px -5px #4c4948; /* */
	border-radius:5px;
}

table style {
	width:inherit;
	max-width: 77%; 
	border="0";
	cellpadding="2"; 
	cellspacing="2";
	text-align:center; 
	outline:red solid 1px;
}

table img {
	width:inherit;
	max-width:100%;
	max-height: 140px; 
	margin-left:0%;
	box-shadow:0px 0px 10px -5px #4c4948;
	border-radius:5px;

}
article {
	display: flex;
	justify-content: center; /* Zentriert das Element horizontal */
	align-items: center; /* Zentriert das Element vertikal, wenn gewünscht */
}

#main {
	display:block;
	width:96%;
	max-width:1000px;
	margin:1.25em auto;
	Padding:0em;
	
}

#main section img {
	width:100%;
	height:100%;
	max-width:100%;
	max-height: auto; 
	margin-left:3%;
	box-shadow:0px 0px 10px -5px #4c4948;
	border-radius:5px;
}


#main article {
	display: inline-block;
	float: right;
	width:74%;
	height:auto;
	margin-right:2.75%;
	vertical-align:top;
	padding: 1.5%;
/*	text-align:justify; */
	margin-bottom:1em;	
	background:rgb(231, 218, 231);
	border-bottom: 0.188em solid #DD0606;
	border-radius:5px;
	}

#main article a {
	display: block;
}
	
/* Bild zentrieren? */

img.mitte {display:block;
	width:96%;
	max-width:1000px;
	height:500px;
	max-height: auto; 
	margin:1.25em auto 1.25em auto;
	Padding:0em;
}



#main .norm {
	cursor: pointer;
	display: inline-block;
	float: right;
	width:77%;
	height:auto;
	margin-right:2.75%;
	vertical-align:top;
	padding: 0em;
	text-align:justify;
	margin-bottom:1em;	
	background:rgb(231, 218, 231);
	border-bottom: 0.188em solid #DD0606;
	border-radius:5px;
	}


#main .norm p {
	padding: 1em 1em 0em 1em;
}

#main .norm b {
	color: white;
	text-shadow: 0 0 5px #333; 
}


#main .norm img {
	display:block;
	float: none;
	vertical-align:top;
	border-radius:5px;
	width:100%;
	height:auto;
	margin:0em auto 1em auto;
	Padding:0em;
}

.popup-background {
        display: none;
		margin: 0;
		position: fixed;
		max-width: 100%;
		max-height: 100%;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7); /* Semi-transparente Hintergrundfarbe */
		z-index: 9998; /* Setzen Sie einen hohen z-index-Wert, um sicherzustellen, dass das Overlay den Hintergrund abdeckt */
		text-align:center;
	} 


.popup {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -51%);
	display:flex;
	flex-direction: column;
    justify-content:flex-start;
	align-items:center;
    background: #DD0606;
	width: 100%;
    max-width: 1500px;
	max-height: 98%;
	margin: 1em;
	Padding:0em;
	text-align:center;
	border-radius: 5px;
	}


.popup-content {    
	display:flex;
	flex-direction: column;
    justify-content:flex-start;
	align-items:flex-start;
	width: 100%;
	height: auto;
    max-width: 1500px;
	max-height: 1500px;
	margin: 0em;
    z-index: 9999;
	overflow: auto;
	border-radius: 5px;
	line-height: 1.25em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: white;
}
	.popup-content::-webkit-scrollbar {
		width: 0; /* Chrome und einige andere Browser */
	}
	
	/* Für Firefox */
	.popup-content::-webkit-scrollbar-thumb {
		background-color: transparent;
	}
	
	.popup-content::-webkit-scrollbar-track {
		background-color: transparent;
	}


.popup img {
	max-width: 100%; /* Das Bild wird auf die Breite des Containers skaliert */
	max-height: 100%; /* Das Bild wird auf die Höhe des Containers skaliert */
	border-bottom: 0.188em solid #DD0606;
    border-radius: 5px;
}

.close-popup {
	cursor: pointer;
	margin-top: 10px;
	display: block;
}

/*
#main article section ul li {
	display:inline-table;
	align-items: center;
	margin:0em;
	padding:0em;
	max-width: 176px;
	
} */

#main article section ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;

  }
  
  #main article section ul li {
	/* flex: 0 0 calc(33.33% - 20px); /* Zum Beispiel: Drei Elemente pro Reihe mit 20px Abstand */
	margin: 0.2em;
	padding:0em;
	max-width: 176px;
	text-align: center;
  }

#main article section ul li ul {
	display:block;
	margin:0em;
	padding:0.125em;
	
}

#main article section ul li ul li {
	display:block;
	margin:0em;
	padding:0em;
	text-align:center;
	
}





#main aside {
	display:table-cell;
	float: left;
	width:17%;
	vertical-align:bottom;
	padding: 0em;
	margin:0em 0em 0em 1.25em;
	border-radius:5px;
	
	
}

#main aside img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height: 290px; 
	margin-left:0%;
	margin-right:3%;
	/* box-shadow:0px 0px 10px -5px #4c4948; *//*
	border-radius:5px;
}  */

#fb article{
	display: block;
	justify-content: center; /* Zentriert das Element horizontal */
	align-items: center; /* Zentriert das Element vertikal, wenn gewünscht */


}

#fb div {
	max-width: 500px;

	}

#services {
	display:block;
	width:96%;
	max-width:1000px;
	margin:1.25em auto;
	Padding:0em;
}

/*volle breite*/
#services article {
	display:block;
	background:rgb(231, 218, 231);
	text-align:center;
	margin:0.5em 0.5em 0.5em 0.5em;
	border-radius:5px;
}

}


/* Footer */

footer {
	display: inline-block;
	background:rgb(231, 218, 231);
	text-align:center;
	width: 100%;

}
footer ul {
	display:block;
	width: 100%;
	max-width:1000px;
	text-align:center;
	margin: 0px auto;
}
footer ul li {
	display:inline;
	font-size: 0.8em;
	line-height: 2.8em;
	color:  #DD0606;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
	color:  #DD0606;
}
/* Mobile Style */
@media screen and (max-width:1100px) {
	body {
	font-size:90%;
	}
	.popup {
		transform: translate(-55%, -55%);
        width: 90%; 
        max-height: 90%; 
        margin: 5%; 
    }
	.popup-content {    
		max-height: none;
	}
}
@media screen and (max-width:1030px) {
	#main article, #fb article, #services article, #main .norm {
	width:96%;
	display:inline-block;
	margin:0.625em 0em 0.625em 0em;
	}
	#main aside {
	display:none
}	
}
@media screen and (min-width:980px) {
	nav.nav {
			display:block !important;
			}
}

@media screen and (max-width:980px) {

   body {
        font-size: 80%;
    }

    /* Zeige das Hamburger-Icon und verstecke das normale Menü */
    .menu-toggle {
        display: block;
    }

	nav {
		height: 0em;
	}
    nav ul {
        display: none;
        position: absolute;
        top: 3em;
        left: 0;
        width: 100%;
        background-color: #333;
    }

    nav ul.active {
        display: block;
    }

    nav ul li {
        display: block;
        text-align: center;
        margin: 0;
        padding: 0.5em 0;
    }

    nav ul li a {
        display: block;
        color: white;
        text-decoration: none;
    }
}