/* FONTS */

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Thin.eot');
    src: local('fonts/Metropolis Thin'), local('fonts/Metropolis-Thin'),
        url('fonts/Metropolis-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Thin.woff2') format('woff2'),
        url('fonts/Metropolis-Thin.woff') format('woff'),
        url('fonts/Metropolis-Thin.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis Extra';
    src: url('fonts/Metropolis-ExtraLight.eot');
    src: local('fonts/Metropolis Extra Light'), local('fonts/Metropolis-ExtraLight'),
        url('fonts/Metropolis-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-ExtraLight.woff2') format('woff2'),
        url('fonts/Metropolis-ExtraLight.woff') format('woff'),
        url('fonts/Metropolis-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Light.eot');
    src: local('fonts/Metropolis Light'), local('fonts/Metropolis-Light'),
        url('fonts/Metropolis-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Light.woff2') format('woff2'),
        url('fonts/Metropolis-Light.woff') format('woff'),
        url('fonts/Metropolis-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}

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

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Medium.eot');
    src: local('fonts/Metropolis Medium'), local('fonts/Metropolis-Medium'),
        url('fonts/Metropolis-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Medium.woff2') format('woff2'),
        url('fonts/Metropolis-Medium.woff') format('woff'),
        url('fonts/Metropolis-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis Extra';
    src: url('fonts/Metropolis-ExtraBold.eot');
    src: local('fonts/Metropolis Extra Bold'), local('fonts/Metropolis-ExtraBold'),
        url('fonts/Metropolis-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-ExtraBold.woff2') format('woff2'),
        url('fonts/Metropolis-ExtraBold.woff') format('woff'),
        url('fonts/Metropolis-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis Semi';
    src: url('fonts/Metropolis-SemiBold.eot');
    src: local('fonts/Metropolis Semi Bold'), local('fonts/Metropolis-SemiBold'),
        url('fonts/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-SemiBold.woff2') format('woff2'),
        url('fonts/Metropolis-SemiBold.woff') format('woff'),
        url('fonts/Metropolis-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Bold.eot');
    src: local('fonts/Metropolis Bold'), local('fonts/Metropolis-Bold'),
        url('fonts/Metropolis-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Bold.woff2') format('woff2'),
        url('fonts/Metropolis-Bold.woff') format('woff'),
        url('fonts/Metropolis-Bold.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Metropolis Extra';
    src: url('fonts/Metropolis-ExtraBoldItalic.eot');
    src: local('fonts/Metropolis Extra Bold Italic'), local('fonts/Metropolis-ExtraBoldItalic'),
        url('fonts/Metropolis-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-ExtraBoldItalic.woff2') format('woff2'),
        url('fonts/Metropolis-ExtraBoldItalic.woff') format('woff'),
        url('fonts/Metropolis-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Black.eot');
    src: local('fonts/Metropolis Black'), local('fonts/Metropolis-Black'),
        url('fonts/Metropolis-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Black.woff2') format('woff2'),
        url('fonts/Metropolis-Black.woff') format('woff'),
        url('fonts/Metropolis-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}

html, body{
padding:0;
margin:0;
height:100%;
}

body {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
background:rgb(255,255,255);
color:rgb(47,52,54);
font-family: 'Metropolis', Helvetica, Arial, sans-serif;
font-weight:300;
line-height:1.6;
font-size:16px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

a, img{
color:rgb(47,52,54);
outline:none;
border:none;
}

img{
vertical-align: middle;
}

strong{
font-weight:600;
}


::-moz-selection{
background:rgb(0,0,0);
color:rgb(255,180,0);
}

::selection{
background:rgb(0,0,0);
color:rgb(255,180,0);
}

.light{
background:rgb(230,230,230);
}

.section{
width:100%;
padding:7em 0;
border-top:1px solid rgba(47,52,54,0.3);
}

#section3{
padding-bottom:0;
}

.header, .menu, .footer, #section1, #section6{
border-top:none;
}

.holder{
overflow:auto;
padding-bottom:0;
}

.width1{
width:44em;
margin:0 auto;
}

.header{
padding:0;
text-align:center;
background:rgb(47,52,54) url(images/header.jpg) no-repeat center center;
background-size:cover;
color:rgb(255,255,255);
}

.header h1{
padding:0.5em 0 1em 0;
line-height:1.3;
max-width:70%;
margin:0 auto;
}

.header img{
max-width:35%;
margin:0 auto;
padding:12em 0 2em 0;
}

h1, h2, h3{
font-family: 'Metropolis', Helvetica, Arial, sans-serif;
font-weight:300;
}

h2{
font-size:1.3em;
}

.down{
position: relative;
display:inline-block;
width: 1.6em;
height: 2.4em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 0.15em solid rgb(255,255,255);
border-radius: 1.2em;
text-indent:-1000em;
overflow:hidden;
margin:2em auto 2em auto;
}

.down span{
position: absolute;
display: block;
top: 29%;
left: 50%;
width: 0.15em;
height: 0.45em;
border-radius: 0.075em;
margin: -0.15em 0 0 -0.075em;
background:rgb(255,255,255);
-webkit-animation: ani-mouse 2.5s linear infinite;
-moz-animation: ani-mouse 2.5s linear infinite;
animation: ani-mouse 2.5s linear infinite;
}

@-webkit-keyframes ani-mouse {
0% {opacity: 1; top: 29%;}
15% {opacity: 1; top: 50%;}
50% {opacity: 0; top: 50%;}
100% {opacity: 0; top: 29%;}
}
@-moz-keyframes ani-mouse {
0% {opacity: 1; top: 29%;}
15% {opacity: 1; top: 50%;}
50% {opacity: 0; top: 50%;}
100% {opacity: 0; top: 29%;}
}
@keyframes ani-mouse {
0% {opacity: 1; top: 29%;}
15% {opacity: 1; top: 50%;}
50% {opacity: 0; top: 50%;}
100% {opacity: 0; top: 29%;}
}

.footer{
padding:1em 0;
text-align:center;
}

.footer .impressum{
font-size:0.7em;
}

.footer strong{
display:block;
}

#impressum{
float:right;
text-decoration:none;
}

.no-js #overover{
display:none;
}

.js #overover{
position:fixed;
width:100%;
heighT:100%;
top:0;
left:0;
display:block;
background:rgba(47,52,54,0.9);
z-index:9999999;
}

.spinner {
  width: 40px;
  height: 40px;
  background-color:rgb(255,180,0);
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}


/* PREISLISTE */

.preisliste{
width:100%;
border:0;
padding:0;
text-align:left;
margin-top:5%;
border-collapse:collapse; 
}

.preisliste td {
padding: 3px 0;
margin:0;
height:8px;
vertical-align:bottom;
line-heighT:100%;
}

.preisliste tr {
padding:0;
margin:0;
border:0;
border-top:1px solid rgba(255,255,255,0.2);
}

.preis{
text-align:right;
width:7em;
}

.preisliste em{
font-weight:600;
text-transform:uppercase;
font-style:normal;
}

.small{
font-size:0.7em;
}


/* MENUE */

#up, #back{
display:none;
position:fixed;
background:rgb(50,50,50);
background:rgba(50,50,50,0.7);
color:#fff;
text-decoration:none;
right:1em;
bottom:1em;
width:2em;
heighT:2em;
box-sizing:border-box;
border-radius:0.2em;
text-align:center;
font-weight:300;
line-height:2;
}

#back{
top:1em;
display:block;
}

.menu{
width:100%;
overflow:auto;
z-index:1000;
padding:0;
position:absolute;
}

.menu ul, .menu li{
display:inline;
list-style-type:none;
margin:0;
padding:0;
}

.menu{
background:rgb(47,52,54);
background:rgba(47,52,54,0.95);
}

.menu.fixed{
position:fixed;
}

.menu a{
display:inline-block;
width:25%;
padding:2em 0;
margin:0;
float:left;
text-align:center;
text-decoration:none;
box-sizing:border-box;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color:rgb(255,180,0);
border-top:5px solid rgba(47,52,54,0.1);
}

.menu ul li:first-of-type a{
text-indent:-999px;
background-image:url(images/logo-small.png);
      background-image: -webkit-image-set(
        url(images/logo-small.png) 1x,
        url(images/logo-smallx2.png) 2x
      );
      background-image: image-set(
        url(images/logo-small.png) 1x,
        url(images/logo-smallx2.png) 2x
      );
background-repeat:no-repeat;
background-position:center center;
}

.menu.fixed a{
padding:1em 0;
}

.menu a:hover{
background-color:rgb(47,52,54,0);
}


.menu li:last-of-type a{
border-right: none;
}

.menu #active{
border-top:5px solid rgb(255,180,0);
}


/* GALLERY */

.imageholder {
overflow:auto;
margin:1em 0;
}

.gallery{
float:left;
display:inline-block;
width:33.333%;
padding:0;
margin:0;
background:#eee;
position:relative;
text-decoration:none;
border:0.2em solid rgb(27,27,27);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

.gallery:hover::after{
content:'';
background:rgba(120,120,120,0.1);
position:absolute;
display:inline-block;
width:100%;
height:100%;
text-align:center;
top:0;
left:0;
}

.gallery img{
width:100%;
height:auto;
float:left;
}

img.width3{
width:25%;
height:auto;
float:left;
border:0.2em solid rgb(255,255,255);
-moz-box-sizing:border-box;
box-sizing:border-box;
}

img.width3.portrait{
padding:0.3em;
margin-right:0.5em;
background: rgba(47,52,54,0.1);
}

/* MAPS */

.js .mapsoverlay{
display:block;
width:37em;
max-width:calc(100% - 8em);
position:relative;
top:50%;
left:50%;
transform: translate(calc(-50% - 1.5em), -50%);
margin:1.5em;
padding:3em;
background:rgba(255,255,255,0.8);
z-index:3;
border-radius:0.5em;
text-align:center;
}

.js #map-canvas{
width:100%;
height:45em;
position:relative;
background: rgba(47,52,54,0.5);
margin-top:5em;
}

.mapcontent{
text-align:center;
padding:0.5em 0.5em 0.5em 1.7em;
line-height:2em;
font-size:1.1em;
}

#map-canvas img {
max-width: none;
}

#map-canvas label {
width: auto;
display:inline;
}

/* FORMULAR */
/* FORM */

form{
padding:3em 0;
}

.links, .rechts{ 
width:calc(50% - 1em);
display:inline-block;
float:left;
text-align:left;
}

.links{
margin-right:1em;
}

.rechts{
margin-left:1em;
}

input.ok, input.not_ok, textarea, .button{
-webkit-appearance: none;
outline: none;
}

input.ok, input.not_ok, textarea{
font-family: 'Metropolis', Helvetica, Arial, sans-serif;
font-size:0.8em;
color:rgba(47,52,54,1);
font-weight:300;
font-size:1em;
border:none;
border-bottom:1px solid rgba(47,52,54,1);
box-sizing:border-box;
border-radius:0;
}

input.ok, input.not_ok{ 
height:3em;
margin-bottom:1em;
width:100%;
padding:0 1em;
background:rgba(255,255,255,0);
}

input.not_ok{
border:none;
border-bottom:1px solid rgba(255,180,0,1);
background:rgba(255,180,0,0.2);
color:rgba(255,180,0,1);
box-sizing:border-box;
}

textarea{
width:100%;
background:rgba(255,255,255,0);
margin-bottom:2em;
padding:1em;
}

.warning, p.not_ok, p.not_ok a{
color:rgba(255,180,0,1);  
}

p.not_ok{
font-weight:600;
}

.invisible{
display:none;
}

.submit{
display:inline-block;
padding:0.8em 1.5em;
margin:1em auto 0 auto;
border:0.1em solid rgb(47,52,54);
text-decoration:none;
color:rgb(47,52,54);
background:none;
font-weight:300;
font-size:1em;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

.submit:hover, .submit:focus{
color:rgb(255,255,255);
background:rgb(47,52,54);
border:0.1em solid rgb(47,52,54);
}

@media screen and (max-width: 53em) {
.width1{
width:80%;
}
img.width1{
width:100%;
}
}

@media screen and (max-width: 38em) {

body{
font-size:0.9em;
}

.header h1{
padding:1em 10% 0 10%;
font-size:1.2em;
}

.header img{
max-width:45%
}


.gallery, img.width3{
width:50%;
}

.links, .rechts{ 
padding-bottom:0.5em;
width:100%;
display:inline-block;
float:left;
text-align:left;
margin:0;
}

.subMenu a{
padding:1.5em 0;
}
}


@media screen and (max-width: 28em) {

}