/*
rot:    #7f1621     rgb(127,22,33)
gold:   #a38751     rgb(163,135,81)
grau:   #878787     rgb(135,135,135)
*/

html, body {
    margin:0; padding:0;
    min-height: 100%;
    display: grid;
}
body {overflow:hidden; width: 100%;}
html {overflow-x:hidden}

.zentriert {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* HEADER #####################################################*/
.header {
    width:100%;
    position: fixed;
    top:0;
    font-size:0;
    box-shadow: 0 0 10px rgba(0,0,0,0.75);
    background: #fff;
    z-index:1000;
}
.header .logo-menue {
    width:100%;
    max-width: 1140px;
    height: 90px;
    display: flex;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}
@media (max-width: 767px) {
    .header .logo-menue {
        width:calc(100% -  20px);
    }
}
.header .logo-menue .navbar-brand {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.header .logo-menue .navbar-brand .brand-logo {
    height:100%;
    overflow:hidden;
}
.header .logo-menue .navbar-brand .brand-logo .logo {
    height:80px;
    margin:5px 0 0 0;
    transition: 0.75s;
}
.header .logo-menue .navbar-brand .brand-logo .logo:hover {
    transform: scale(0.9);
}

.header .logo-menue .menumobil_button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    transition: 0.5s;
}
.header .logo-menue .menumobil_button label {
  border: 3px solid #69727d;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0 0 0 0;
  display: block;
}
.header .logo-menue .menumobil_button .lines {
    cursor: pointer;
    z-index: 1;
    width: 50%;
    margin: 0 auto;
}
.header .logo-menue .menumobil_button .lines [class^="line-"] {
    width: 100%;
    height: 4px;
    background-color: #555;
    border-radius: 4px;
    transition: all 0.6s ease;
}
.header .logo-menue .menumobil_button .line-1 {
    margin: 0 0 5px 0;
}
.header .logo-menue .menumobil_button .line-2 {
    margin: 10px 0 10px 0;
    display:none;
}
.header .logo-menue .menumobil_button .line-3 {
    margin: 5px 0 0 0;
}
.header .logo-menue .menumobil_button #hamburger-checkbox:checked ~ label .line-1 {
    transform: translatey(4px) rotate(45deg);
}
.header .logo-menue .menumobil_button #hamburger-checkbox:checked ~ label .line-2 {
    transform: scale(0);
}
.header .logo-menue .menumobil_button #hamburger-checkbox:checked ~ label .line-3 {
    transform: translatey(-5px) rotate(-45deg);
}
.header .logo-menue .menumobil_button #hamburger-checkbox {
    display: none;
}
.header .logo-menue .menumobil_button:hover {
    transform: scale(0.9);
}
.header .logo-menue .menumobil_button:hover .lines [class^="line-"] {
 background-color: rgb(163,135,81);
 
}
/* MENÜ flyover ##################################### */
.menu {
    position: fixed;
    display: block;
    top: 0;
    left: -101%; /* damit ich rechnen kann */
    z-index: 1111;
    width: 100%;
    background-color: #000000e0;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.menu .menu2 {

}
.menu .menu2 ul {
    font-family:"IBM Plex Mono", sans-serif;
    display: block;
  list-style: none;
  margin: 0;
  padding: 10px 0 0 0;
  z-index: 0;
  position: relative;
}
.menu .menu2 ul li {
 font-size: 25px;
 font-weight: 500;
 color:#fff;
 display: block;
  list-style: none;
  padding: 0;
  text-align: center;
  margin: 10px 0;
  transition: .5s;
}
.menu .menu2 ul li:hover, .menu .menu2 ul li.current {
    transform:scale(0.9); 
}
.menu .menu2 ul li:hover a, .menu .menu2 ul li.current a {
   
 color:#a28654
}
.menu .menu2 ul li a {
    color:#fff;
    font-size: 25px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 0;
    display: block;
    transition: .5s;
}
/* menubutton */
.menu .menumobil_button {
    position: fixed;
    display: none;
    top: 10px;
    right: 10px;
    height: 60px;
    transition: 0.5s;
    z-index: +1
}
.menu .menumobil_button label {
  border: 3px solid #69727d;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0 0 0 0;
  display: block;
}
.menu .menumobil_button .lines {
    cursor: pointer;
    z-index: 1;
    width: 50%;
    margin: 0 auto;
}
.menu .menumobil_button .lines [class^="line-"] {
    width: 100%;
    height: 4px;
    background-color: rgb(163,135,81);
    border-radius: 4px;
    transition: all 0.6s ease;
}
.menu .menumobil_button .line-1 {
    margin: 0 0 5px 0;
    transform: translatey(4px) rotate(45deg);
}
.menu .menumobil_button .line-2 {
    margin: 10px 0 10px 0;
    display:none;
}
.menu .menumobil_button .line-3 {
    margin: 5px 0 0 0;
    transform: translatey(-5px) rotate(-45deg);
}
.menu .menumobil_button #hamburger-checkbox_close:checked ~ label .line-1 {
    transform: translatey(4px) rotate(-45deg);
}
.menu .menumobil_button #hamburger-checkbox_close:checked ~ label .line-2 {
    transform: scale(0);
}
.menu .menumobil_button #hamburger-checkbox_close:checked ~ label .line-3 {
    transform: translatey(-5px) rotate(45deg);
}
.menu .menumobil_button #hamburger-checkbox_close {
    display: none;
}
.menu .menumobil_button:hover {
    transform: scale(0.9);
}
.menu .menumobil_button:hover .lines [class^="line-"] {
 background-color: rgb(163,135,81);
 transform: rotate(180deg);
}
/* Seiten ########################################### */
.seite {
    position: relative;
    top:0px;
    margin-top:90px;
    width: 100%;
    font-family:"IBM Plex Mono", sans-serif;
    font-size: 16px;
  line-height: 26px;
}
.unter {
    background: url(/templates/kinat/img/teller-bg.png?6) center bottom no-repeat #fff;
    background-size: auto;
    background-size: contain;
    color:#878787;
}
.unter a {
    text-decoration: none;
    color: #7f1621;
    font-weight: bold;
}
.seite .w1140 {
    width:100%;
    max-width:1140px;
    margin:0 auto 0 auto;
}
.seite .seite2 main {

}
.seite .homebild {
    background:url(/templates/kinat/img/06.jpg);
    background-position-x: 50%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    display:flex;
}
.seite .homebild .homebildtext {
    margin: 0;
    overflow: hidden;
    width: 100%;
    text-align: center;
}
.seite .homebild .homebildtext h1 {
 color:#fff;
 font-family:"IBM Plex Mono", sans-serif;
 font-size:4vH;
 transition:2s;
 white-space: nowrap;
}
.seite .homebild .homebildtext:hover h1 {
    transform:scale(6);
    filter:blur(20px)

}
.seite main .wrapper {
    width: 100%;
    display: block;
    position: relative;
    float: left;
    /*
    margin-top: 20px;
    margin-bottom:20px;
    */
    border:none;

} 
.seite main .wrapper .row100        {width:100%; display: block; position: relative;} 
.seite main .wrapper .row100 .col50 {width:50%; float: left;} 
.seite main .wrapper h1 {
    font-family: "Playwrite CZ", cursive;
    font-size:44px;
    margin: 30px 0 50px 0;
}
.seite .reservierung.row100 {width:100%; display: block; position: relative;}
.seite .reservierung.row100 .col50 {width:50%; float: left;} 
.seite .reservierung.row100 #quandoo-booking-widget  {margin-left:20px; width: calc(50% - 20px);}
@media (max-width: 960px) {
    .seite .reservierung.row100 {padding: 0 10px; box-sizing: border-box;}
    .seite .reservierung.row100 .col50 {width:100%;}   
    .seite .reservierung.row100 #quandoo-booking-widget  {text-align: center; margin:0; width:100%;}
}

@media (max-width: 1140px) {
 .seite main .wrapper .row100 {padding: 0 10px; box-sizing: border-box;}
 .seite main .wrapper .row100 .col50 {width:100%;} 
}
.seite main .wrapper.black {
    background:#000;
    color:#fff;
}
.seite main .wrapper.black a {
    color:#a38751;
    text-decoration:none;
}
.seite main .wrapper.gold {
    background:#ffffff;
    color:#666666;
    /*
    background:#a38751;
    color:#000;
    */
}
.seite main .wrapper.gold a {
    color:#7f1621;
    text-decoration:none;
}
.seite main .wrapper.rot {
    /*
    background:#7f1621;
    color:#a38751;
    */
    background:#ffffff;
    color:#666666;
    font-weight:bold;
}
.seite main .wrapper.rot a {
    color:#a38751;
    text-decoration:none;
}
.seite main .wrapper.weiss {
    background:#878787;
    color:#fff;
}
.seite main .wrapper.weiss a {
    color:#7f1621;
    text-decoration:none;
}
.seite main .wrapper-map {
    font-size: 0;
  line-height: 0;
}


@media (min-width: 767px) {
    .seite .homebild .homebildtext h1 {
        font-family: "Playwrite CZ", cursive;
        font-size:8vH;
        line-height: 11vH;
    }
}
@media (max-width: 639px) {
 h4, h3, h2, h1 {     /* p war auch drin */
    display: inline-block;
    overflow-wrap: anywhere;
 }
 .seite main .wrapper h1 {
    font-size:40px;
 }
}

/* unterseiten */
.unterseite {
  width: 100%;
  max-width: 1140px;
  margin: 20px auto 20px auto;
  box-sizing: border-box;
  padding: 10px;
  /*
  background: url(/templates/kinat/img/teller-bg.png?6) center 200px no-repeat;
  background-size: contain;
  */
}
.unterseite h1 {
    margin:0 0 0px 0;
}
@media (max-width: 1140px) {
    
    .unterseite {
        /* padding: 0 10px; */
        box-shadow: none !important;
    }
    
    
}

/* weitere classen die im Menü angegeben werden können */
body.gray .unter {
    background:#878787;
    color:#fff;
}
body.gray .unter .unterseite {
    box-shadow: 0px 0px 0 3px #7f1621;
}
body.white .unter {
    background:#fff;
    color:#878787;
}
body.black .unter {
    background:#000;
    color:#fff;
}
body.red .unter {
    background:#7f1621;
    color:#fff;
}
body.grau .unter {
    background:#00000088;
    color:#fff;
}
body.gold .unter {
    background:#a38751;
    color:#fff;
}
body.gold .unter .unterseite {
    box-shadow: 0px 0px 0 3px #7f1621;
}
body.gold .unter .unterseite h1 {
    color:#7f1621;
}
body.bild .unterseite .item-pagebild .page-header, body.bild .visforms {
    background: url(/images/Seiten/standard.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-size: auto;
  background-position-x: 50%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  text-align: center;
  box-shadow: 0 0 10px;
}
@media (max-width: 649px) {
    body.bild .unterseite .item-pagebild .page-header {
        height: 200px;
    }
}
body.bild .unterseite {
    box-shadow:none;
    padding:0;
    margin:0 auto;
    }
body.bild .unterseite .item-pagebild .page-header h1 {
    color:#878787;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: "Playwrite CZ", cursive;
    font-size: 47px;
  text-shadow: 0 0 1px rgb(255, 255, 255);
  font-weight: bold;
}
@media (max-width: 649px) {
    body.bild .unterseite .item-pagebild .page-header h1 {
        font-size: 8vW;
    }
}
body.bild .unterseite .item-pagebild .page-header h1.h1-dark {
    color:#444;
}
body.bild .unterseite .item-pagebild .com-content-article__body {
    padding:0 0px;
    box-sizing: border-box;
}
.com-content-article__body h1 {
    margin: 40px 0 40px 0;
    font-size: 32px;
  line-height: 36px;
}
/* footer */
.com_flexicontact .wrapper-footer {
    display: none;
  }
.wrapper-footer {
    /*background: #7f1621;*/
    background: #fff;
}
.wrapper-footer .icons {
    text-align: center;
    padding: 30px 0 30px 0;
}
@media (max-width: 639px) {
    .wrapper-footer .icons {
        padding: 10px 0 10px 0;
    }  
    body.bild .unterseite .item-pagebild .com-content-article__body {
        padding:0 10px;
    }
}
.wrapper-footer .icons .icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin: 0 7px 0 7px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.25);
    transition: 0.5s;
    box-shadow: 0px 5px 7px rgba(0,0,0,0.5);
}
.wrapper-footer .icons .icon:hover {
    border-radius: 20%;
    transform: scale(1.25);
}
.wrapper-footer .icons .icon a {
    display: block;
    width: 100%;
    height: 100%;
}
.wrapper-footer .icons .icon_FB {
    background: url(/templates/kinat/img/icon_fb.png) center center no-repeat #fff;
}
.wrapper-footer .icons .icon_IN {
    background: url(/templates/kinat/img/icon_insta.png) center center no-repeat #fff;
}
.wrapper-footer .icons .icon_EM {
    background: url(/templates/kinat/img/icon_email.png) center center no-repeat #fff;
}
.wrapper-footer .icons .icon_TF {
    background: url(/templates/kinat/img/icon_tf.png) center center no-repeat #fff;
}
/* bilderwechsel */
.wrapper3home {
    width:100%;
}
.wrapper3Ahome {
    width: 100%;
    /*max-height: 800px;*/
    overflow: hidden;
    box-sizing: border-box;
  }
/* awesome */
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }


.eventsrow100 {}
.eventsrow100 .col33 {width:33%; float:left; transition: 1s; }
.eventsrow100 .col33:hover {width:100%;}
.eventsrow100 .col33 img {width:calc(100% - 20px); margin:10px;}