/* =========================================
Stylesheet von Waldseehaus
Datei: screen.css
Datum: 25.02.21
Autor: GuidoSchumacher
========================================= */


@charset "UTF-8";

 

@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/julius-sans-one-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/julius-sans-one-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/julius-sans-one-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/julius-sans-one-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/julius-sans-one-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/julius-sans-one-v9-latin-regular.svg#JuliusSansOne') format('svg'); /* Legacy iOS */
}



*{text-decoration:none;  margin:0px; padding:0px; outline:none;}


body	{
	width:100%;
	max-width:1440px;  /*maximale Breite der Seite*/
	background-color:#111111; margin:0px auto;
}
header	{
	background-color:#000000; margin:0px auto;
	position:relative; 
	background:url(gfx/bg_top.jpg) no-repeat 0 0 #000;
	height:215px;
	border:0px;
 	background-size: 100% 240px;
 	}
	#logo	{float:left; padding:30px 0px 0px 45px;} /* Logo-links*/

	#bild-ani bild1ani  {
 		position:absolute;
 		top:0px;
 		right:538px;
 		opacity:0;
 		-webkit-animation: fade 42s infinite;
 		-moz-animation: fade 42s infinite;
 		-ms-animation: fade 42s infinite;
 		-o-animation: fade 42s infinite;
 		animation: fade 42s infinite;
 	}
 	#bild-ani bild2ani  {
 		position:absolute;
 		top:0px;
 		right:359px;
 		display:block;
 		opacity:0; 
 		-webkit-animation: fade 42s infinite;
 		-moz-animation: fade 42s infinite;
 		-ms-animation: fade 42s infinite;
 		-o-animation: fade 42s infinite;
 		animation: fade 42s infinite;
 	}
 	#bild-ani bild3ani  {
 		position:absolute;
 		top:0px;
 		right:180px;
 		opacity:0;
 		-webkit-animation: fade 42s infinite;
 		-moz-animation: fade 42s infinite;
 		-ms-animation: fade 42s infinite;
 		-o-animation: fade 42s infinite;
 		animation: fade 42s infinite;
 	}
 	@keyframes fade {
  		0%, 30% , 100%	{opacity:0;}
 		10% , 20%	{ opacity:1;} 
 	}
 	#bild-ani #step1 { animation-delay:3s;}
 	#bild-ani #step2 { animation-delay:6s;}
 	#bild-ani #step3 { animation-delay:9s;}
 	#bild-ani #step4 { animation-delay:12s;}
 	#bild-ani #step5 { animation-delay:15s;}
 	#bild-ani #step6 { animation-delay:18s;}
 	#bild-ani #step7 { animation-delay:21s;}
 	#bild-ani #step8 { animation-delay:24s;}
 	#bild-ani #step9 { animation-delay:27s;}
 	#bild-ani #step10 { animation-delay:30s;}
 	#bild-ani #step11 { animation-delay:33s;}
 	#bild-ani #step12 { animation-delay:34s;}
 	#bild-ani #step13 { animation-delay:37s;}
 	#bild-ani #step14 { animation-delay:40s;}
 	#bild-ani #step15 { animation-delay:42s;}


	nav	{	
		font-family: 'Julius Sans One';
		display:table; 
		font-size:18px;
		position:absolute;
 		top:180px;
		background-color:#b27a42;
		background:url(gfx/bg_menue.jpg) no-repeat 0 0 #000;
		background-size: 100% 233px;
		width:100%;
 	}

  	nav ul{display:table;list-style:none;}
  	nav ul li {float:left;color:#ffffca;padding:5px 10px; display:inline-block;}
  	nav ul li a{color:#ffffca;padding:5px 10px;} 
  	nav ul li a:visited {color:#ffffca; transition: all 1s ease 0s;}
  	nav ul li a:hover{color:#fbcb5c; background-color:#444444;transition: all 1s ease 0s;}	
  	nav ul li:first-child{padding-left:40px;}/*links Platz lassen vor erstem Eintrag*/				

main{
	background:url(gfx/bg.jpg) repeat 0 0 #000;
	border:0px;
 	background-size: 100% 897px;
	font-size:15px;color:#f2ecd7;font-family: Helvetica, Arial, sans-serif;
	line-height: 1.3;
	padding:20px 45px;
	background-color:#000000; margin:0px auto;
	position:relative;

}


/* hier wird die Seite in zwei Teile geteilt (65% und35%) */
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }

.flex-item:nth-child(1) {
    flex: 0 1 65%;
    font-weight: normal;
    text-align: justify;

}
.flex-item:nth-child(1) a, 
.flex-item:nth-child(1) a:focus,
.flex-item:nth-child(1) a:hover {
	color:#ff8800;
	font-style: normal; font-weight: 400;
	text-decoration: underline;
}

.flex-item:nth-child(2) {
   flex: 0 1 35%;
   padding-right:20px;
   text-align: right;
}

/* die Boxen links */
.box{
	display:block;
	border:1px solid black;
	color:#000000; 
	padding:0px 15px;
	background-color:#f8edd4;
	text-align: left;

   }
   .gr_spalte{
	width:100%;
	column-width: 260px;
 	column-gap: 10px;
	}
	.gr_elm{
	 display:block;
	 width:260px;
	 padding-left:15px;
	 padding-top:5px;
	 font-size:13px;
	}
   .kl_spalte{
	width:100%;
	column-width: 175px;
	column-gap: 10px;
	}
 	.kl_elm{
	 display:block;
	 width:175px;
	 padding-left:25px;
	 padding-top:0px;
	 font-size:13px;	
	}


/* So werden die Bilder mit Titel angezeigt*/
figure {
    display: flex;
    flex-flow: column;
    padding:15px 00px 0px 24px;
   /*  max-width: 400px;*/
    margin: auto;
    position: relative;
}

figure img {
    max-width: 100%;
    max-height: auto;
    display: right;
}

figcaption {
  	color: #ffffff;
	position: absolute;
	top: 90%;
	right: 10px;
  	padding :0px 10px;
	background-color:#000000;
	opacity: 0.7;
}


h1       {font-size: 18px;color:#fbcb5b;margin-bottom:20px;margin-top:10px;font-weight: normal}
h2       {font-size: 15px;color:#000000;padding-bottom:0px;padding-top:10px;padding-left:8px;font-weight:700;}
h3       {font-size: 15px;color:#fbcb5b;padding-bottom:0px;padding-top:10px;font-weight:400;}
h4       {font-size: 15px;color:#fbcb5b;padding-bottom:0px;padding-top:10px;font-weight:400;}
p        {margin-bottom:8px;margin-top:2px}

footer{
	background:url(gfx/bg_foot.jpg) no-repeat 0 0 #000;
	height:139px;
	margin:0px;
 	background-size: 100% 139px;
	font-size:12px;color:#fbcb5c;font-family: Arial, Helvetica, sans-serif; line-height: 1.5;
}

.container {display: flex; flex-direction: row; justify-content: space-between; padding-top:15px; }
.anschrift a, 
.anschrift a:focus,
.anschrift a:hover {
	color:#ff8800;
	font-style: normal; font-weight: 400;
	text-decoration: underline;
}

@media only screen and (max-width: 1410px) {
 nav{ font-size:18px;}
}

@media only screen and (max-width: 1285px) {
 nav{ font-size:17px;}
 main{font-size:15px};
}

@media only screen and (max-width: 1023px) {
 #bild-ani bild1ani  { display:none;}
 header {height:240px;}
 nav{ font-size:17px;}
}

@media only screen and (max-width: 845px) {
 #bild-ani bild1ani  { display:none;}
 #bild-ani bild2ani  { display:none;}
 nav{ font-size:17px;}
}
@media only screen and (max-width: 690px) {
 header {height:255px;}
 nav{ font-size:17px;}
}

@media only screen and (max-width: 675px) {
 #bild-ani bild1ani  { display:none;}
 #bild-ani bild2ani  { display:none;}
 #bild-ani bild3ani  { display:none;}
 nav{font-size:15px;}
 main{font-size:13px};
}


/* ===============Belegkalender============== */
.bkdiv           {background-color:#ffebc9;float:left;padding:5px;padding-bottom:2px;border: 1px solid #000000;margin-top:7px;}
.bktable         {color: #000000;background-color:#ffebc9;width:155px;font-family: Arial,sans-serif;font-size:12px;text-align:center;border-collapse:collapse}
.bkueberschrift  {background-color:#bb4900;font-weight: bold;border: 1px solid #000000;color: #ffffff;}
.bkdiveingabe    {background-color:#ffebc9;float:left;padding:5px;border: 1px solid #000000;margin-top:5px;}

#bklink a {font-family: Arial, Helvetica, sans-serif;font-size: 100%;font-weight: bold;line-height: 22px;text-decoration: none}
#bklink a:link {color: #efefee;}
#bklink a:visited {color: #efefef;}
#bklink a:hover, a:focus {text-decoration: underline;color: #efefee;font-weight: bold}

#fotober {padding:8px;padding-top:3px;background-color:#514f52;font-weight: bold;border: 1px solid #000000;color: #fc8900;font-family: Arial, Helvetica, sans-serif;font-size:9px}
.button  {background-color:#fbcb5b;color: #000000;font-family: Arial, Helvetica, sans-serif;font-size:9px;padding:3px}