body {   /* background-image: url("Astra_Haus_1.jpg"); */
          background-color: ;
          text-align: center;
          background-attachment: fixed;
          background-origin: ;
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: 100%;}



header { /*background-image: url("Berge_1.jpg");*/
         background-repeat: no-repeat;
         background-position: 50% 50%;
         margin-left: 300;
         margin-right: 300;
         background-attachment: scroll;
         font-family: Papyrus, Sylfaen, Verdana, Times New Roman, Pristina, Highlight LET;
         font-size: 46px;
         font-weight: bold;
         text-decoration: none;
         color: #008030;
         text-align: center;
                                         }


 /*Bilder {background-color: ;
         width: 100%;
         height: auto;
         margin-left: 200;
         margin-right: 50;
         font-family: Times New Roman, Pristina, Highlight LET;
         font-size: 26px;
         font-weight: ;
         text-decoration: ;
         color:#FF0000;
         text-align: center;
                                          }*/


aside {background-color: ;
       position: absolute;
       font-family: sans serif, Bookman Old Style,VERDANA,ARIAL,HELVETICA;
       font-size: 10px;
       color:#000000;
       right: 0px;
       left: ;
       width: 175px;
       height: 50px;
       top: 50px ;
       bottom: ;
       float: right;
                                      }


p {       background-color:#FFFFFF ;
          color:black;
          text-align: center;
          font-family: ARIAL,HELVETICA;
          background-attachment: fixed;
          background-origin: ;
          background-position: 50% 50%;
          background-repeat: no-repeat;
          background-size: 100%;}

#FW_list {
            text-align: left;
            padding-left: 20em;
          }
#FW_detail {
              text-align: left;
            padding-left: 5em;
                    }
/*
aside img {margin-left: 10px;
    border: 1px solid silver;
                                     }*/



a { padding: 3px ; }
a:focus { background-color:  ; color: #FF0000 ;}
a:hover { background-color: ; color: #FF0000; }
a:active { background-color: ; color: ; }

nav { background-color: ;
        text-decoration: ;
         width: 150px;
         float: left;
         border: 3px ;
         font-size: 24px;
         color: #000000;
         text-align: left;
         font-family: sans serif, Bookman Old Style,VERDANA,ARIAL,HELVETICA;
         font-weight: bold;
                                                                    }

footer { background-color: #CFCFCF;
        background-attachment: ;
        font-family: serif;
        color: black;
        text-align: center;
        float: center;
        width: 100%;
        height: 120px;
        margin-top: 0px;
        flex-shrink: 0;      }
/*
img {
     width: 100%;
                  }

@media (min-width: 25em) {
  img {
       width: 50%;
      float: right;
      margin: 0 0 1em 1em;
                }}

@media (min-width: 50em) {
    img {
            width: 25%;
                                             }
                                           }


#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
}

#gallery > figcaption {
  grid-column: 1 / -1;
}

#galerie figure {
	background: #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	display: inline-block;
	height: 15em;
	margin: 0 0 1em 2em;
	overflow: hidden;
	padding: 0;
	width: 1em;
	transition: all 0.25s ease-in;
}

#galerie figure img {
	width: 1em;
	height: 1em;
}

#galerie figure:hover,
#galerie figure:focus {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
	margin: -1em 0px 0 20px;
	padding: 5px 5px 30px 5px;
	width: 1em;
	z-index: 2;
	transform: scale(2);
}

#galerie figcaption {
	color: #333;
	font: cursive 10px/150%;
	font-family: "Reenie Beanie", cursive;
	position:relative;
	text-align: center;
	width: 15em;
}*/



.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}