/*reset*/
* { padding: 0; margin: 0; }

html, body {
   height: 100%
}

body {
   background-color: black;
   }

#wrapper {
   width: 100%;
   background-image: linear-gradient(to right, #FAA000 , white 75%, white);
   border-top: 1px solid black;
   min-height: 100%; height: auto;
   margin: 0 auto;  /*zentriert den "wrapper" im Browserfenster*/
}

header {
   float: left;
   background-image: url("../img/header_6_1024_fein.png");
   background-size: 100% 260px;
   margin: 6px 0 0 0;
   width: 100%; height: 260px;
}

header h2:nth-of-type(1) {
   position: absolute;
   font-family: 'Work Sans';
   color: #993300;
   margin-top: -3px; margin-left: 1px;
   display: inline;
}

header h2:nth-of-type(2) {
   position: absolute;
   font-family: 'Work Sans';
   color: #993300;
   margin-top: -3px; margin-left: 215px;
   display: inline;
}

header h3 {
   position: absolute;
   transform-origin: top left;
   transform: rotate(90deg);
   font-family: 'Work Sans';
   color: #FAA000;
   margin-top: 1px; margin-left: 212px;
   display: inline;
}

#logo {
   float: right;
   margin-top: 22px; margin-right:35px;
   width: 130px;
}

#logo:hover {
   transform: scale(1.1);
}

#steuerung {
   margin: 240px 15% 0 15%;
}

#steuerung ul {                       /* Die ul ist unser Flex-Container, die li, die Flex-Items*/
   display: flex;
   flex-direction: row;
   justify-content: space-between;     /* space-between sorgt f�r gleiche Abst�nde zwischen den Flex-Items*/
   list-style-type: none;
   padding: 0px;
}

#steuerung li {
   list-style-type: none;
}

#steuerung li a {
   font-family: 'Work Sans';
   font-size: 1em;
   color: white;

   padding: 5px;
   text-decoration: none;
}

#steuerung li a:hover {
   color: black;
}

header .activ {
   background-color: rgba(255,255,255,1);
}

.menue-button {display: none;}



.back {float: right; font-family: 'Work Sans'; font-size: 1em;  color: #aa4141; margin-right: 8%;}
.back a {text-decoration: none; font-family: 'Work Sans'; font-size: 1em;  color: #aa4141;}
.back a:hover {color: white;}
#lageanfahrt .back a {text-decoration: none; font-family: 'Work Sans'; font-size: 1em;  color: #aa4141;}
#lageanfahrt .back a:hover {background-color: transparent; color: white;}

hr {
    clear: both;
    width: 84%;
    height: 1px;
    border: none;
    margin: 0 auto;
    color: black;
    background-color: black;
   }

#home, #kontakt {
   margin-top: 20px;
/*   overflow: auto;*/
   width: 100%;
   }

#wohnungen, #agb {
   padding-top: 5%;
   margin-top: 0;
   overflow: auto;
   width: 100%;
   }

#lageanfahrt {
   padding-top: 5%;
   margin-top: 0;
   overflow: auto;
   width: 100%;
   }

#terminepreise, #impressum {
   padding-top: 5%;
   margin-top: 0;
   overflow: auto;
   width: 100%;
   }

#home img.Uhr, #kontakt img.Uhr {width: 50px; height: auto; float: left; margin: 0 10px 5px 0;}
#wohnungen img.Uhr, #agb img.Uhr {width: 50px; height: auto; float: left; margin: 0 10px 5px 0;}
#lageanfahrt img.Uhr, #datenschutz img.Uhr {width: 50px; height: auto; float: left; margin: 0 10px 5px 0;}
#terminepreise img.Uhr, #impressum img.Uhr {width: 50px; height: auto; float: left; margin: 0 10px 10px 0;}

#home img {
   float: right;
   width: 50%;
   height: auto;
   margin-left: 4%; margin-bottom: 10px;
   }

#wohnungen img {
   float: right;
   width: 50%;
   height: auto;
   margin-left: 4%;
   }

#lageanfahrt img {
   float: right;
   width: 50%;
   height: auto;
   margin-left: 4%;
   }

#lageanfahrt a {
   color: black;
   }
#lageanfahrt a:hover {
   color: white;
   background-color: #aa4141;
   }

#text {
      float: left;
      width: 84%;
      margin-top: 20px; margin-left: 8%; margin-right: 8%; margin-bottom: 10px;
      text-align: justify;
      font-family: 'Taviraj', serif; font-size: 0.9em;
      hyphens: auto;
   }

#text h3 {text-align: left;}

#bottom {float: left; width: 100%;}
#bottom p:first-child {margin-top: 1em;}
#bottom p {margin-left: 8%; margin-right: 8%; text-align: justify; font-family: 'Taviraj', serif; font-size: 0.9em;}
#bottom p.back {font-family: 'Work Sans', serif; font-size: 1em;}



#main_content {
   float: left;
   position: relative;
   background-image: linear-gradient(to bottom, #87B387 , white 75%, #789FBE);
   margin: 0px 0px 0px 0px;
   width: 100%; min-height: 100%; height: auto;
}

#Wcontainer {
       clear: both;
       display: block;
       float: left;
       padding: 2%;
       position:relative;
       width: 80%;
       margin-left: 8%; margin-right: 8%; margin-top: 5px;
       box-shadow:1px 1px 5px #111;
       -moz-box-shadow:1px 1px 5px #111;
       -webkit-box-shadow:1px 1px 5px #111;
   }

#gallery {
       width: 100%;
       margin:0 auto;
       text-align: center; /*�berschreibt das von text geerbte justify*/
   }

#gallery a {
       display:inline-block;
       height:100px;
       position:relative;
       width:150px;
   }

#gallery a img {
       border:5px solid #fff;
       cursor:pointer;
       display:block;
       height:100%;
       left:0px;
       position:absolute;
       top:0px;
       width:100%;
       box-sizing:border-box;
   }

#LAcontainer {
       display: block;
       float: right;
       margin-left: 4%;
       margin-top: 60px;
       position:relative;
       width: 50%; height: auto;
       box-shadow:1px 1px 5px #111;
       -moz-box-shadow:1px 1px 5px #111;
       -webkit-box-shadow:1px 1px 5px #111;
   }

#slideshow {
   display: block;
   float: right;
   margin-left: 4%;
   margin-top: 10px;
   position:relative;
   width: 50%; height: 350px;
   box-shadow:1px 1px 5px #111;
   -moz-box-shadow:1px 1px 5px #111;
   -webkit-box-shadow:1px 1px 5px #111;
   }

#slideshow img {
   display: none;
   position: absolute;
   margin-left: 4%;
   margin-top: 10px;
   max-width: 90%; height: auto; max-height: 330px;
   border: 6px solid #fff;
   }

#slideshow img.start {
   display: block;
   }

#terminepreise p, #impressum p {margin-left: 60px;}

#terminepreise ul {
   clear: both;
   margin-top: 20px;
   display: block;
   text-align: center;
   list-style-type: none;
   box-shadow:1px 1px 5px #111;
   -moz-box-shadow:1px 1px 5px #111;
   -webkit-box-shadow:1px 1px 5px #111;
   }

#terminepreise ul li {
   display: inline-block;
   list-style-type: none;
   padding: 5px 15px 5px 15px;
   }

#terminepreise ul li a {
   font-family: 'Taviraj', serif;
   font-size: 1em;
   text-decoration: none;
   padding: 0px 5px 0px 5px;
   color: #124F8B;
   }

#terminepreise ul li a:hover {
   background-color: #aa4141;
   color: white;
   }

#footer {
   clear: both;
   float: left;
   background-image: url("../img/footer_4_1024.png");
   background-size: 100% 182px;
   width: 100%; height: 182px
}

#footer nav {
   margin: 120px 20% 0px 20%;
}

#footer nav ul {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   list-style-type: none;
   padding: 5px;
}
#footer nav li {
   list-style-type: none;
}
#footer nav li a {
   font-family: 'Work Sans';
   font-size: 0.8em;
   color: white;

   padding: 5px 15px 5px 15px;
   text-decoration: none;
}
#footer nav li a:hover {
   background-color: rgba(255,255,255,1);
   color: black;
}

#footer .activ {
   background-color: rgba(255,255,255,1);
}

h2 {
   font-family: 'Work Sans';
   color: white;
}

#main_content h2 {
   text-align: center;
   color: #663300;
   margin-top: 20px;
   padding: 5px;
   margin-bottom: 10px;
   }


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

.menue-button {
   text-decoration: none;
   display: block;
   position: absolute;
   right: 0;
   bottom: 0px;
   font-family: 'Work Sans'; font-size: 1em;  color: #aa4141;
   background-color: #87B387;
   margin-right: 8%;
   }

.menue-button:hover {color: white;}

header {
   float: left;
   position: relative;
   background-color: #87B387;
   background-image: url("../img/header_6_1024_fein_S.png");
   background-repeat: no-repeat;
   background-size: 100% 260px;
   margin: 5px 0 0 0;
   width: 100%; min-height: 260px; height: auto;
}

#steuerung {
   margin: 240px 8% 0 8%;
}

#steuerung ul {
   display: none;
   list-style-type: none;
   padding: 0px;
}

#steuerung li {
   width: 100%;
   padding: 2px 0px 0px 0px;
   list-style-type: none;
}

#steuerung li a {
   display: block;
   font-family: 'Work Sans';
   font-size: 1em;
   color: white;
   width: 100%;
   padding: 0px 0px 0px 0px;
   text-decoration: none;
}

#steuerung li a:hover {
   background-color: rgba(255,255,255,0.5);
   color: black;
}

header .activ {
   background-color: rgba(255,255,255,1);
}

#logo {margin-top: 100px;}

#home {
   margin-top: 5px;
}

#footer {
   clear: both;
   float: left;
   background-image: url("../img/footer_4_1024.png");
   background-size: 100% 182px;
   width: 100%; height: 182px
}

#footer nav {
   margin: 0px 8% 0px 8%;
}

#footer nav ul {
   display: block;
   list-style-type: none;
   padding: 0px;
}
#footer nav li {
   display: block;
   float: left;
   list-style-type: none;
   width: 100%;

}
#footer nav li a {
   display: block;
   font-family: 'Work Sans';
   font-size: 0.8em;
   color: white;
   width: 100%;

   padding: 5px 5px 5px 0px;
   text-decoration: none;
}

#footer nav li a:hover {
   background-color: rgba(255,255,255,0.5);
   color: black;
}

}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung>ul {
   display: block;
}

/* ausblenden des Men�-Buttons zum �ffnen - somit wird der zum Schlie�en sichtbar */
#nav-menue:target .menue-button-beschr-open {
   display: none;
}