﻿/* CSS-Layout index1.htm */
#page {
				padding: 0 0 0 0;
				margin: 0 auto;
				width: 1200px;
				height: 800px;
				overflow: hidden;
}
h1  {				
				font-family: Arial;
				font-size: 4em;
}
h2  {				
				font-family: Arial;
				font-size: 2em;
}

.pos1 {
				color: #000000;
				font-weight: normal;
				text-align: center;
				vertical-align: top;
				z-index: 10;
				height: 20px;
}
#sidebar {
				padding: 290px 0 0 0;
				width: 225px;
				height: 587px;
				left: 0px;
				background-image:  url('../images/Fl4.png');
				background-repeat: no-repeat;
				float: left;
				top: -290px;
				z-index: 1000;
				position: relative;
}
#Box1 {
				position: relative;
				height: 150px;
				width: 1000px;
				top: -55px;
				left: 180px;
				clear: both;
				float: left;
				z-index: 3000;
}
#Box2 {
				background-color: #00ff00;
				float: right;
				height: 200px;
				width: 400px;
}
#Box3 {
				margin: 0;
				padding: 0;
				position: relative;
				top: -25px;
				float: right;
				width: 1060px;
				left: 0px;
				height: 208px;
}

.bl1 {
				position: absolute;
				width: 203px;
				height: 152px;
				top: 85px;
				z-index: 3200;
				left: 0px;
}
.bl2 {
				position: absolute;
				width: 203px;
				height: 152px;
				top: 85px;
				z-index: 3200;
				right: 0px;
}
.bl3 {
				position: absolute;
				width: 153px;
				height: 152px;
				top: 130px;
				z-index: 3200;
				right: 10px;
}
.AZ{
				border-width: 0px;
				position: absolute;
				top: 95px;
				right: 140px;
				z-index:10000;
}
.bdy {
				background: url('../images/Weinberg.jpg') no-repeat;
				margin: 0 0 0 0;
				padding: 0;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
}
#IF1 {
				border-style: none;
				border-width: 0;
				height: 565px;
				position: relative;
				top: -25px;
				width: 904px;
				right: 60px;
				margin-bottom: 0px;
				float: right;
				z-index: 0;
}
.IF2 {
				position: relative;
				border-width: 0;
				left: 0px;
				width: 900px;
				height: 565px;
				float: left;
				z-index: 100;
}
.tip span {
	position: absolute;
	padding: 5px 5px 10px 5px;
	left: 180px;
	visibility: hidden;
	color: black;
	background-color: rgba(215,223,240,0.9);
	background-repeat: repeat;
	width: 200px;
	text-align: left;
	font-family: Arial;
	font-size: 0.875em;
	z-index: 100;
}
.tip1:hover span { 
				visibility: visible;
				top: 400px;
				height: auto;
				
}

.tip2:hover span { 
				visibility: visible;
				top: 430px;
				height: auto;
}


.tip3:hover span { 
				visibility: visible;
				text-align:center;
				top: 630px;
				height: auto;
				

}
.tip4:hover span { 
				visibility:  visible;
				text-align:center;
				top: 630px;
				height: auto;
				
}
#wetter {
				border-style: none;
				border-color: inherit;
				border-width: 0px;
				position: relative;
				top: 5px;
				left: 0px;
				background-color: transparent;
				text-align: center;
}
ul#sidebar {
				font-family: Verdana,Arial,Helvetica,sans-serif;
				font-size: 0.938em;
				color: #FFFFFF;
				text-decoration: none;
				text-transform: none;
				text-indent: 15px;
}
ul#sidebar li {
				display: block;
				padding:0.07em;
}
ul#sidebar a {
				color: #FFFFFF;
				text-decoration: none;
				text-transform: none;
				text-indent: 20px;
}
ul#sidebar li :hover {
				color: #fc0a1c;
				text-decoration: none;
				text-transform: none;
				text-indent: 20px;
}
.klr{
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
}

.mittlr{
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
				border-radius: 12px;
}
img a {
	border: none;
	
} 
/*============================ CSS-Layout Termine.htm====================================== */
div#wrapper {
	margin: 10px auto;
	width: 870px; /* Abstand rechts */;
}
#top{
	margin: 30px 0 35px 0;
	text-align: center;
	font-family: Arial;
	font-size: 1em;
}
#top1{
	margin: 35px 0 35px 0;
	text-align: center;
	font-family: Arial;
	font-size: 1em;
}

#notiz5{
				margin:  0 auto;
				background-color: #FFFFFF;
				text-align: left;
				width: 350px;
				height: 350px;
				z-index: 1;
				/*float:   left;
				position: relative;*/
  				left: 50%;
  				
				transition: all 1s ease-in;
				visibility: visible;
				
}
#notiz10{
				/*position: relative;*/
				margin: 30px 0 0 30px;
				/*position: relative;*/
				background-color: #FFFFFF;
				text-align: left;
				width: 350px;
				height: 350px;
				z-index: 1;
				float: left;
				transition: all 1s ease-in;
	visibility: visible;
}
#notiz20{
	/*position: relative;*/
				margin: 50px 50px 0 0;
	background-color: #FFFFFF;
	text-align: right;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: right;
	transition: all 1s ease-in;	
}
#notiz30{
	/*position: relative;*/
				margin: 60px 0 0 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: left;
	transition: all 1s ease-in;
}
#notiz35{
	/*position: relative;*/
				margin: 60px 0 0 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: left;
	transition: all 1s ease-in;
}

#notiz40{
	/*position: relative;*/
				margin: 45px 40px 0 0;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 365px;
	z-index: 1;
	float: right;
	transition: all 1s ease-in;
}
#notiz50{
	/*position: relative;*/
				margin: 50px 30px 0 30px;
	background-color: #FFFFFF;
	text-align: left;
	/*top: 960px;*/
	width: 350px;
	height: 350px;
	z-index: 1;
	left: 29px;
	float: left;
	transition: all 1s ease-in;
}
#notiz51{
	/*position: relative;*/
				margin: 50px 40px 0 0;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: right;
	transition: all 1s ease-in;
}
#notiz60{
	/*position: absolute;*/

				margin: 50px 30px 20px 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: left;
	visibility: visible;
	transition: all 1s ease-in;
}
#notiz65{
	/*position: relative;*/
				margin: 70px 0px 30px 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: left;
	position: relative;
	left:25%;
	transition: all 1s ease-in;
}
#notiz66{
	/*position: relative;*/
				margin: 40px 0px 30px 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: right ;
	transition: all 1s ease-in;
}
#notiz70{
	/*position: relative;*/
				margin: 40px 0px 50px 70px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: left;
	transition: all 1s ease-in;
	visibility:hidden;
}

#notiz80{
	/*position: relative;*/
				margin: 40px 40px 30px 50px;
	background-color: #FFFFFF;
	text-align: left;
	width: 350px;
	height: 350px;
	z-index: 1;
	float: right;
	transition: all 1s ease-in;
	visibility:hidden;
}
.Mein_Label img{
 	border-style:none;
	 vertical-align:middle;
}
.bild2   {
      margin: 5px;
     /*isplay: inline-block;*/
      padding: 5px;
      border: 1px solid #f2f2f2;
}
.bild1:hover  {
      transform: scale(1.2);
      transition: all 4s ease-out;
      transition: all 1s ease-in;
      box-shadow: 2px 5px 5px 5px rgba(0, 0, 0, 0.44);
      }

.absa{
	position: absolute;
	width: 207px;
	height: 89px;
	top: 76px;
	left: 57px;
	 display:none;
	 /*z-index: 1;*/
}
.qrc{
	position: absolute;
	width: 90px;
	height: 90px;
	top: 15px;
	left: 230px;
	z-index: 100;
}

.Mein_Label{
				/*position: relative;*/
				position: relative;
				width: 330px;
				height: 250px;
				left: 10px;
				top: 32px;
				/*z-index: 100;*/
}
.cursor {
  cursor: pointer;
}

.bg{
				background-image: url('../images/Notiz/Notiz.jpg');
				background-repeat: no-repeat;
				width: 300px;
				height: 300px;
				z-index: 150;
}
.bg1{
				background-image:  url('../images/Notiz/1Notiz.png');
				background-repeat:no-repeat;
				width:300px;
				height:300px;
				z-index:150;
}
.bg2{
				background-image:url('../images/Notiz/2Notiz.png');
				background-repeat:no-repeat;
				width:300px;
				height:300px;
				z-index:150;
}
.bg3{
				background-image:url('../images/Notiz/Notiz.jpg');
				background-repeat:no-repeat;
				width:300px;
				height:300px;
				z-index:150;
}
.bg4{
				background-image:url('../images/Notiz/2Biene Notiz.png');
				background-repeat:no-repeat;
				width:300px;
				height:300px;
				z-index:150;
}
.bg5{
				background-image:url('../images/Notiz/0Biene Notiz.png');
				background-repeat:no-repeat;
				width:300px;
				height:300px;
				z-index:150;
}

.h1 {
	font-family: Arial;
	text-align: center;
	font-size: medium;
	padding-top: 30px;
	padding-bottom: 0px;
	visibility: visible;
}
.h2 {
				font-family: Arial;
				font-size: 12px;
				text-align: left;
}
<!--#top h1 {
				margin: 0 0 30px 0;
				font-family: Arial;
				font-size: 22px;
				text-align: center;
				font-weight: normal;
}-->
#txt1{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}

#txt2{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}

#txt3{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}

#txt4{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}

#txt5{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}

#txt6{
				position: relative;
				top: 4px;
				left: 1px;
				visibility: visible;
}
#txt7{
				position: relative;
				top: 4px;
				left: 1px;
				visibility:  hidden;
}
#txt8{
				position: relative;
				top: 4px;
				left: 1px;
				visibility:  hidden;
}

#cl{
				clear:both; 
				height: 25px;
}
/*.schatten {		box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.4);
				-webkit-box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.4);
}
.schatten {		box-shadow: 4px 4px 2px 1px rgba(255, 255, 255, 1.0);
				-moz-box-shadow: 4px 4px 2px 1px rgba(255, 255, 255,1.0);
				-webkit-box-shadow: 4px 4px 2px 1px rgba(255, 255, 255, 1.0);
}*/
.schatten {		box-shadow: 2px 2px 2px 2px rgba(207, 207, 207, 1.0);
				-moz-box-shadow: 2px 2px 2px 2px rgba(207, 207, 207,1.0);
				-webkit-box-shadow: 2px 2px 2px 2px rgba(207, 207, 207, 1.0);
}
/*============================ CSS Termine modal====================================== */
	/* Ungeöffnete Lightbox */
.lightbox {
  display: none;
}

/* Geöffnete lightbox */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:110;
}

/* Lightbox Inhalt */
.lightbox figcaption {
	 width: auto;
	 position: relative;
	 padding: 0.4em;
	 background-color: #FFFFFF;
 }

/* Button zum Schließen */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* Lightbox Überlagerung (Overlay) */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}
