@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-ExtraLight.eot');
    src: url('../fonts/RobotoCondensed-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-ExtraLight.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-ExtraLight.woff') format('woff'),
        url('../fonts/RobotoCondensed-ExtraLight.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-ExtraLight.svg#RobotoCondensed-ExtraLight') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Light.eot');
    src: url('../fonts/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Light.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Light.woff') format('woff'),
        url('../fonts/RobotoCondensed-Light.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Light.svg#RobotoCondensed-Light') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-Regular.eot');
    src: url('../fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-Regular.woff') format('woff'),
        url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-Regular.svg#RobotoCondensed-Regular') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/RobotoCondensed-BoldItalic.eot');
    src: url('../fonts/RobotoCondensed-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/RobotoCondensed-BoldItalic.woff2') format('woff2'),
        url('../fonts/RobotoCondensed-BoldItalic.woff') format('woff'),
        url('../fonts/RobotoCondensed-BoldItalic.ttf') format('truetype'),
        url('../fonts/RobotoCondensed-BoldItalic.svg#RobotoCondensed-BoldItalic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Annie Use Your Telescope';
    src: url('../fonts/AnnieUseYourTelescope-Regular.eot');
    src: url('../fonts/AnnieUseYourTelescope-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AnnieUseYourTelescope-Regular.woff2') format('woff2'),
        url('../fonts/AnnieUseYourTelescope-Regular.woff') format('woff'),
        url('../fonts/AnnieUseYourTelescope-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*font-weights - 100 - 200 - 300 - 400*/

html, body{
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
width: 100%; 
height: 100%; 
font-family: 'Roboto Condensed'; 
font-size: 1.2em; 
font-weight: 100; 
line-height: 1.8em; 
background: rgb(209,209,209);
background: linear-gradient(90deg, rgba(230,230,230,1) 0%, rgba(140,153,144,1) 50%, rgba(230,230,230,1) 100%);
}

#kopf{
background: rgb(137,201,87);
background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(29,136,62,1) 55%, rgba(29,136,62,1) 70%, rgba(137,201,87,1) 100%);
width: 100%;
min-height: 250px;  
padding: 0px; 
margin: 0px; 
border-radius: 30px 30px 0px 0px; 
z-index: 100; 
}

#logo{
width: 35%; 
padding: 0px; 
margin: 0px; 
float: left; 
border:0px solid #FF0000; 
z-index: 1000; 
position: relative; 
}
#logo .text{
float: left; 
color: #FFFFFF; 
margin: 0px 0px 0px 150px; 
padding: 0px; 
font-family: 'Annie Use Your Telescope'; font-weight: normal; font-style: normal; font-size: 2.2em; 
min-width: 400px;  
top: -50px; 
transform: rotate(0deg);
position: relative; 
z-index: 1001; 
}

#fernsehturm{
max-height: 200px; 
width: 80%; 
height: 200px; 
margin: 0px; 
padding: 0px; 
display: inline-block; 
border: 0px solid #FF0000; 
position: absolute; 
left:10%; 
top: 80px; 
z-index: 500; 
opacity: 0.5; 
background-repeat: no-repeat; 
background-image: url('../bilder/fernsehturm.png'); 
background-position: right bottom; 
background-size: auto 200px;
z-index: 100; 
}
#hirsch img{
height: 190px; 
width: auto; 
margin: 0px; 
padding: 0px; 
display: inline-block; 
}

#logo img{
height: 170px; 
width: auto; 
padding: 0px; 
margin: 0px; 
}


#logotext{
font-family: 'Annie Use Your Telescope'; font-weight: normal; font-style: normal;
width: 50%; 
padding: 0px; 
margin: 40px 0% 10px 0%; 
position: absolute; 
right: 10%; 
font-size: 1.4em;
line-height: 1.1em; 
letter-spacing: 0.05em;
color: #FFFFFF; 
text-align: left; 
transform: rotate(-4deg);
border: 0px solid #FF0000; 
}

.small{font-size: 0.7em; }

#gaestestimmen{
position: absolute; 
right: 10%; 
top: 200px; 
margin: 20px 20px 0px 0px; 
padding: 0px; 
z-index: 400; 
}

#gaestestimmen a{
color: #FFFFFF; 
border: 3px solid #FFFFFF; 
font-weight: normal; 
text-align: center; 
text-decoration: none; 
background: rgb(137,201,87);
background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(29,136,62,1) 55%, rgba(29,136,62,1) 70%, rgba(137,201,87,1) 100%);
border-radius: 200px; 
line-height: 30px; 
width: 150px; 
height: 110px; 
display: block; 
margin: 0px; 
padding: 40px 0px 0px 0px; 
transform: rotate(0deg);
transition: 0.8s ease-in-out; 
}

#gaestestimmen a:hover, #gaestestimmen a:focus{
transform: rotate(360deg); 
}

#content{
width: 80%; 
height: auto; 
padding: 0px; 
margin: 20px 10% 50px 10%; 
border: 0px solid #FF0000; 
background-color: #FFFFFF; 
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border-radius: 30px 30px 0px 0px; 
}

.ausflug #content #texte span.mustsee b, .ausflug #content #texte span.mustsee strong{
text-transform: uppercase;
padding: 0px 0px 20px 0px; 
}
span.mustseebox{
border: 1px solid #999999; 
display: inline-block; 
width: 60%; 
line-height: 1.4em; 
padding: 20px; 
border-radius: 20px; 
margin: 0px 0px 20px 0px; 
}
.ausflug #content #texte span.mustsee a{
background-color: #DFDFDF; 
padding: 10px 20px 10px 20px; 
margin: 0px 0px 5px 0px; 
text-decoration: none; 
display: block; 
line-height: 1.0em; 
background-repeat: no-repeat; background-image: url('../img/sys/zoom-link.gif'); background-position: right 10px center; 
border-radius: 30px 30px 30px 30px; 
}


/*NAVIGATION*/
#responsive{display: none; }
#desktop{display: inline-block; width: 100%; padding: 0px; margin: 0px;z-index: 200; }

#desktop ul#nav{ width: 100%; height: auto; min-height: 60px; padding: 20px 0px 0px 0px; margin: 0px auto; border: 0px solid #0000FF; list-style-type: none; position: relative; z-index: 300; display: flex; justify-content: center; }
#desktop ul.navclass{ border-bottom: 0px solid rgba(137,201,87,0.3); padding: 0px 0px 0px 0px; margin: 0px; list-style-type: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; background: rgb(137,201,87); background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(29,136,62,1) 55%, rgba(29,136,62,1) 70%, rgba(137,201,87,1) 100%); }

#desktop ul#nav li a{ display: block;  text-decoration: none; color: #FFFFFF; text-transform: uppercase; font-weight: 200; padding: 0px 5px 0px 10px; margin: 0px; }
#desktop ul#nav li a:hover, #desktop ul#nav li a:focus{ opacity: 0.7; }
#desktop ul#nav li{ float: left; padding: 0px 2% 0px 2%; margin: 0px; position: relative; }
#desktop ul#nav li.haschild{ font-weight: 200; color: #FFFFFF; text-transform: uppercase; }

#desktop ul#nav li ul.subnav{ max-height: 0px; overflow: hidden; opacity: 0.0; background-image: url('../img/close.png'); background-repeat: no-repeat; background-size: 14px 14px; background-position: right 5px bottom 5px; list-style-type: none; width: 150%; padding: 20px 0px 0px 0px; margin: 0px; position: absolute; z-index: 1200; transition: 0.5s ease-in-out; border: 1px solid #DFDFDF; background-color: #FFFFFF; }
#desktop ul#nav li ul.subnav li{ float: left; display: block; width: 90%; position: relative; }
#desktop ul#nav li ul.subnav li a{ display: block; font-weight: 100; line-height: 1.0em; padding: 10px 5px 10px 10px; }
#desktop ul#nav li ul.subnav.ausgeklappt{ opacity: 1.0; max-height: 1000px; overflow: hidden; color: #000000; }
#desktop ul#nav li ul.subnav.ausgeklappt a{ color: #000000; }
#desktop ul#nav li span.caret{ border-left: 0px solid rgba(29,136,62,1.0); border-right: 0px solid #CCCCCC; border-top: 0px solid rgba(29,136,62,1.0); border-bottom: 0px solid #CCCCCC; transform: rotate(225deg); background-color: rgba(255,255,255,1.0); border-radius: 30px; width: 10px; height: 10px; padding: 0px; margin: 0px; position: absolute; bottom: 8px; left: calc(50% - 6px); z-index: 1; display: inline-block; }
#desktop ul#nav li.close{ height: 20px; }

.start #desktop ul#nav li.start a, .barsinghausen #desktop ul#nav li.barsinghausen a, .preise #desktop ul#nav li.preise a, .ausflug #desktop ul#nav li.ausflug a, .impressum #desktop ul#nav li.impressum a, .kontakt #desktop ul#nav li.kontakt a, .unterkunft #desktop ul#nav li.unterkunft, .ausflug #desktop ul#nav li.ausflug{ color: rgb(210, 230, 190); }
.start #desktop ul#nav li ul{ color: #000000; }

#texte{ margin: 0px; padding: 70px 70px 100px 70px; hyphens: auto; display: inline-block; width: calc(100% - 140px); }
#texte h3{ color: rgb(29,136,62); font-family: 'Annie Use Your Telescope'; font-weight: normal; font-style: normal; font-size: 2.4em; line-height: 1.2em; text-align: center; padding: 0px; margin: 0px 0px 50px 0px; transform: rotate(0deg); hyphens: none; }
#texte a{ font-weight: 300; color: #000000; transition: 0.5s ease-in-out; }
#texte a:hover{ opacity: 0.5; }
#texte .bild_border a:hover, #texte .bild_imtext a:hover{ opacity: 1.0; }

hr.divide{border-bottom: 1px solid #CCCCCC; border-bottom: 0px solid #CCCCCC;border-top: 1px solid #CCCCCC;border-left: 0px solid #CCCCCC;border-right: 0px solid #CCCCCC; width: 100%}

a.rechtsausrichten{ float: right; padding: 0px; margin: 0px 20px 0px 30px; max-width: 250px; }
a.rechtsausrichten img, a.linksausrichten img{ width: 100%; height: auto; border: 1px solid #CCCCCC; padding: 8px; margin: 0px; opacity: 1.0; transition: 0.8s ease-in-out; }
a.rechtsausrichten img:hover, a.linksausrichten img:hover{ opacity: 0.7; }

a.linksausrichten{ float: left; padding: 0px; margin: 0px 30px 0px 20px; max-width: 250px; }

.ma_text{font-size: 0.8em; }

.bild_border{ width: 320px; height: auto; border: 1px solid #CCCCCC; padding: 8px; margin: 0px 10px 10px 0px; display: inline-block; transition: 0.3s ease-in-out; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
.bild_border:nth-child(even):hover, .bild_imtext:nth-child(even):hover{ transform: rotate(-2deg); }
.bild_border:nth-child(odd):hover, .bild_imtext:nth-child(odd):hover{ transform: rotate(2deg); }

.thumbnail{ width: 320px; height: 200px; padding: 0px; margin: 0px; display: block; background-size: cover; background-repeat: no-repeat; }
.thumbnail.hoch{ width: 200px; height: 320px; }
span.herbst, span.sommer, span.fruehling, span.winter{float: right; border: 1px solid #CCCCCC; padding: 8px; margin: 0px 10px 10px 20px; display: inline-block; transition: 0.3s ease-in-out; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}

.bildimtext{float: right; border: 0px solid #FF0000; display: inline-block; width: 320px; }
.bild_imtext{ width: 320px; height: auto; border: 1px solid #CCCCCC; padding: 8px; margin: 0px 10px 10px 0px; display: block; float: right; 
transition: 0.3s ease-in-out; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }

#footer{ position: fixed; bottom: 0px; left: 0px; height: 45px; width: 78%; padding: 7px 1% 7px 1%; margin: 0px 10% 0px 10%; background: rgb(137,201,87); background: linear-gradient(90deg, rgba(50,50,50,1) 0%, rgba(29,136,62,1) 55%, rgba(29,136,62,1) 70%, rgba(137,201,87,1) 100%); color: #FFFFFF; font-size: 0.8em; text-align: center; }
#footer a{
color: #FFFFFF; 
text-decoration: underline;
}

@media screen and (min-width: 1401px) and (max-width: 1600px) {
#logotext{font-size: 1.2em; width: 40%;}
#desktop ul#nav{width: calc(100% - 200px); padding: 20px 200px 0px 0px; font-size: 0.9em;}

}


@media screen and (min-width: 1025px) and (max-width: 1400px) {
#desktop ul#nav li a, #desktop ul#nav li.haschild{font-size:0.9em;line-height: 1.2em;}
#logotext{font-size: 1.1em; width: 38%;margin: 50px 1% 30px 0%;}
#desktop ul#nav{width: calc(100% - 200px); padding: 20px 200px 0px 0px; font-size: 0.9em;}
#kopf{min-height: 270px; }
#logo .text{font-size: 1.8em; }
#logo img{height: 150px; border: 0px solid #FF0000; }
#gaestestimmen{top: 250px;}
#gaestestimmen a{width: 120px; height: 80px; line-height: 20px; font-size: 0.9em;}
#desktop ul#nav{width: calc(100% - 150px); padding: 20px 150px 0px 0px;}
}


@media screen and (min-width: 300px) and (max-width: 1024px) {
#content{margin: 60px 0px 50px 0px; padding: 0px 0px 0px 0px; width: 100%; border-radius: 0px 0px 0px 0px;border: 0px solid #FF0000;}
#kopf{border-radius: 0px 0px 0px 0px; border: 0px solid #FF0000; height: 320px; }
#logo{max-width: 100%; }
#logo img{height: auto; width: 280px; max-width: 350px; padding: 0px 10% 0px 10%; }
#logo .text{font-size: 1.8em; right: 40px; top: -50px; width: auto; min-width: 250px; }
#logotext{width: 70%;transform: rotate(-2deg); margin: 20px 0% 30px 0%; font-size: 1.0em; position: relative; top: -30px; right: 0%; left: 10%;  float: left; opacity: 0.8; border: 0px solid #FF0000; display: block; }
#gaestestimmen{top: 280px; right: 0%; }
#gaestestimmen a{width: 120px; height: 80px; line-height: 20px; font-size: 0.9em;}
#fernsehturm{top: 250px; opacity: 0.2; left: 20%;}

#texte{padding: 40px 3% 100px 3%; width: 94%;}
#responsive{z-index: 1201; display: inline-block; border: 0px solid #FF0000; width: 100%; 
padding: 60px 0px 0px 0px; margin: 0px 0px 0px 0px; position: absolute; top: 0px; left: 0px; max-height: 0px; height: auto; transition: 0.5s ease-in-out; overflow: hidden; z-index: 1000; background-size: auto 50px; background-repeat: no-repeat; background-image: url('../images/nav_resp.png'); background-position: right top; background-color: rgba(29,136,62,1); border-bottom: 1px solid #FFFFFF;}
#desktop{display: none; }
#responsive.ausgeklappt{max-height: 1000px; }
#responsive ul#nav{ 
list-style-type: none; 
width: 80%; 
margin: 0px 10% 0px 10%; 
padding: 0px 0px 50px 0px; 
border: 0px solid #00FF00; 
color: #FFFFFF; 
font-weight: 300; 
text-transform: uppercase; 
}
#responsive ul#nav ul{ list-style-type: none; color: #FFFFFF; font-weight: 100;  text-transform: none; }
#responsive ul#nav a{ color: #FFFFFF; text-decoration: none; display: block; }

span.herbst, span.sommer, span.fruehling, span.winter {width: 70%; margin: 0px 15% 30px 15%; }
.thumbnail{width: 100%; height: 180px; background-position: center center;}
.thumbnail.hoch{width: 100%; }
.bildimtext{width: 70%; margin: 0px 15% 30px 15%; }

#footer{
width: 94%;
  padding: 7px 3% 7px 3%;
  margin: 0px 0px 0px 0px;
height: 160px;
line-height: 1.1em; 
bottom: -134px;
transition: 0.5s ease-in-out; 
}
#footer.ausgeklappt{
bottom: 0px;
}

#footer span.visible.plus{
padding: 40px 0px 0px;
background-image: url('../img/sys/plus_1.png'); 
background-position: right top; 
background-repeat: no-repeat; 
background-size: 30px 30px; 
}
#footer span.visible{display: block; }
#footer span.invisible{display: none; }

span.mustseebox{width: calc(100% - 40px);}


}