/* ********************************************************** */
/* GLOBAL */
/* ********************************************************** */

body
{
        background:#000000;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFF;
        margin: 0;
}

input
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:220px;
        background: #EBE8DE;
        border-radius:5px;
}

textarea
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:220px;
        background: #EBE8DE;
        border-radius:5px;
}

input[type=submit]
{
        width:auto;
        padding: 5px 18px;
        line-height:25px;
        text-shadow:none;
        cursor:pointer;
        box-shadow: none;
        background: #333333;
        color: #fff;
}

p
{
        margin:15px 0;
        /*font-size:14px;*/
        line-height:20px;
        clear:both;
        -ms-hyphens:auto;
        -webkit-hyphens:auto;
        hyphens:auto;
}

sup
{
         vertical-align: super;
         font-size:smaller;
}

a
{
        text-decoration:none;
}

/* Linkfarben Standard */
a:link {
        color: #fbea28;
}
a:visited { 
        color: #fbea28;
}
a:active { 
        color: #fcf59d;
}
a:hover {
        color: #fcf59d;
} 

strong {
        font-weight:bold;
}

i {
        font-style:italic;
}

.error-message
{
        color: #ff0000;
}

.debug-message
{
        color: red;
}

.info-message
{
        color: green;
}

.inline-icon
{
        vertical-align: middle;
}

figcaption strong
{
        border-bottom: 1px solid #D6D0C1;
        padding-bottom:10px;
        margin: 10px 0;
        display:block;
}

figcaption
{
        line-height: 25px;
        font-size:14px;
        width:200px;
}

hr
{
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}

.Gelber_Fliesstext_in_Bildkaesten {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #fbea28;
}

.Gelber_Fliesstext {
        /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
        font-size: 14px;
        color: #fbea28;
}

.Oranger_Fliesstext {
        color: #F90;
}

.Roter_Fliesstext {
        color: red;
}

.Weisser_Fliesstext_klein {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #FFF;
}

.Fliesstext_klein {
        font-size: 10px;
}

/* ********************************************************** */
/* HEADER */
/* ********************************************************** */

header
{
        position:relative;
        width:auto;
        height:auto;
        max-width:750px;
        margin: 0 auto 20px auto;
        background-color:#fbea28;
}

header h1
{
        margin:35px 0 0 0;
        font-size:55px;
        color: #000000;    
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight:bold;
        text-align:center;
}

header p
{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:16px;
        font-weight:bold;        
        color: #000000;
        margin:5px 0 0px 0;
        padding-bottom: 5px;
        text-align:center;
}

.header-flag
{
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
}

nav
{
        position:relative;
        margin-top:20px;
        right:0;
        bottom:0;
        clear:both;
        height:auto;
}

nav ul
{
        list-style:none;
}

nav ul li
{
        display:block;
        float:left;
        padding:3px 20px 3px 0;
}

nav ul li a
{
        font-family: 'Open Sans', sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
        color: #fbea28;
        text-decoration:none;
}

nav ul li a:hover
{
        color: #E56038;
}

a.nav_active {
        color: #4caf50 !important;
        font-weight: bold;
}

nav ul li a.nav_active:hover {
        color: #4caf50 !important;
}

#mobileMenu a.nav_active {
        color: #fff !important;
        background-color: #000;
        font-weight: bold;
        display: block;
        padding: 12px 0;
        margin: -12px 0;
}

/* Navigation: Hervorgehobene Items (Reservierung, Gutscheine) */
a.nav_orange {
        font-weight: bold;
}

a.nav_orange:link {
        color: #fbea28;
}

a.nav_orange:visited {
        color: #fbea28;
}

a.nav_orange:hover {
        color: #E56038;
}

a.nav_orange:active {
        color: #fbea28;
}

/* Mobile Navigation: Hervorgehobene Items */
a.nav_black {
        font-weight: bold;
}

a.nav_black:link {
        color: black;
}

a.nav_black:visited {
        color: black;
}

a.nav_black:hover {
        font-weight:bold
}

a.nav_black:active {
        color: black;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #E56038;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #CC5836;
        text-decoration:none;
}


.toggleMobile
{
        display: none;
}

/* ********************************************************** */
/* STARTSEITE  */
/* ********************************************************** */

#header_startseite
{
        position:relative;
        width:auto;
        height:auto;
        max-width:750px;
        margin: 0 auto 20px auto;
        background-color:#fbea28;
}

#startseite p
{
        width: auto;
        max-width: 750px;
        margin: 15px auto 15px auto;
        font-size:14px;
        color: #FF9900;
        font-weight:bold;
        text-align:center;
        display:block;
}

#header_startseite p
{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:16px;
        font-weight:bold;        
        color: #000000;
        margin:5px 0 0px 0;
        padding-bottom: 5px;
        text-align:center;
}

#header_startseite h1
{
        margin:35px 0 0 0;
        font-size:55px;
        color: #000000;    
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight:bold;
        text-align:center;
}

#startseite h2
{
        margin:35px 0 0 0;
        font-size:40px;
        font-weight:bold;
        text-align:center;
}

#startseite h3
{
        margin:35px 0 0 0;
        font-size:20px;
        font-weight:bold;
        text-align:center;
}

#startseite h4
{
        margin:20px 0 0 0;
        font-size:14px;
        font-weight:bold;
        text-align:center;
}

.impressumlink a
{
        color: #F90;
}

.impressumlink a:hover
{
        color: #fcf59d;
}

/* ********************************************************** */
/* TEXT COLUMNS*/
/* ********************************************************** */

#text_columns
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        clear:both;
        width:auto;
        max-width:750px;
        margin:0 auto;
}

#text_columns h3
{
        font-size:20px;
        border-bottom: 1px solid #D6D0C1;
        padding: 20px 0;
        margin-bottom: 20px;
        clear:both;        
}

#text_columns h4
{
        font-size:16px;
        padding: 10px 0 0 0;
        margin-bottom: 0;
        color: #F90;
        font-variant:small-caps;
        clear:both;        
}

/* ********************************************************** */
/* SPEISEN */
/* ********************************************************** */

#speisen
{
        display:table;
        padding:0 0 0 0;
        max-width: 750px;
}

#speisen .speisen_col1
{
        display:table-cell;
        float:left;
        width:auto;
        max-width: 62px;
        margin: 0 20px 0 0;
}

#speisen .speisen_col2
{
        display:table-cell;
        float:left;
        width:auto;
        max-width: 586px; /* 750 - 62 - 62 - 20 - 20 */
        margin: 0 20px 0 0;
}

#speisen .speisen_col3
{
        display:table-cell;
        float:right;
        width:auto;
        max-width: 62px;
        margin:0 0 0 0;
}

/* allein schon nötig, um es ausblenden zu können */
.speisen_figure{
        float:left;
        width:62px;
        margin: 0 0 0 0;
        border: none;
}

/* ********************************************************** */
/* GÄSTEBUCH */
/* ********************************************************** */

.gaestebuch_bild /* für neues Gästebuch */
{
      max-width: 100%;
      height: auto;
      margin: 10px 0px 0px 0px;
}


/* ********************************************************** */
/* TWO COLUMNS */
/* ********************************************************** */

.fig_with_border
{
      border: 1px solid #fbea28;
}

.fig_no_border
{
      border: 0px solid #fbea28;
      
}

.fig_no_border img
{
      max-width: 100%;
      height: auto;
      margin: 0px 0px 0px 0px;
}


#reservierungs_tabelle
{
      max-width: 750px;
      border-collapse:separate;
}

#reservierungs_tabelle td
{
    border: 1px solid #fbea28;
    line-height: 15px;
    padding: 3px 5px 3px 0;
}

#reservierungs_tabelle td
{
      border: 1px solid #fbea28;
      line-height: 15px;
      padding: 3px 5px 3px 0;
}

.res_left
{
      float:left;
      width:200px;
}

.res_right
{
      float:left;
      clear:all;
}

#getraenke_karte
{
      max-width: 750px;
      border-collapse:separate;
}

#getraenke_karte td
{
      line-height: 15px;
      padding: 3px 5px 3px 0;
}

.bg_gray
{
        background-color:#333;
}

.getr_name
{
        width: 390px;
        max-width: 400px;
}

.getr_menge
{
        width: 80px;
        max-width: 100px;
}
.getr_preis
{
        width: 80px;
        max-width: 100 px;
}

#team{
        max-width: 750px;
        border-collapse:separate;
}

#team td
{
        line-height: 20px;
        padding: 3px 5px 3px 0;
}

.team_bild
{
        width: 200px;
        max-width: 200px;
        vertical-align:top;
        float:left;
}

.team_text
{
        max-width: 750px;
        line-height:20px;
        float:left;
        clear:all;
}

#text_columns ul
{
        list-style:circle;
        list-style-position:outside;
}

#text_columns ul li
{
        line-height: 15px;
        margin-left: 30px;
        padding-left: 20px;
        padding-bottom: 5px;
}

#text_columns article.column1
{
        margin: 20px 0 0 0;
        font-size:14px;
        float:left;
        width:auto;
        max-width: 750px;
}

#text_columns .column2
{
        margin: 40px 0;
        font-size:14px;
        float:left;
        width:auto;
        max-width: 300px;
}

#text_columns article.column1 figure{
        float:left;
        max-width:none;
        margin: 20px 0 20px 0;
}

#text_columns article.column1 figcaption{
        max-width:none;
        padding: 5px 5px 5px 5px;
        line-height: 16px;
        font-size:12px;
        color: #FF0;
}

#text_columns a{
        text-decoration:underline;
}

.row
{
        position:relative;
        margin: 0 0 0 50px;
        float:right;
        width:350px;
}

.row img
{
        float:right;
}

.row p
{
        margin-left: 100px;
}

/* MISC */
.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}


/* ********************************************************** */
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
/* ********************************************************** */

@media print
{    
        header nav
        {
            display:none !important;
        }
}

@media (max-width: 1215px)
{
}

@media (max-width: 915px)
{
.row img
{
        display:none;
}        

.speisen_figure{
        display:none;
}
}

@media (max-width: 765px)
{

        #text_columns article.column1, #text_columns .column2
        {
                float:none;
                max-width: 650px;
                margin: 50px 10px 0 10px;
        }
        .column2 .row
        {
                float:none;
                margin:0 0 40px 50px;
        }
        nav
        {
                margin-left: +10px;
        }
        
}

@media (max-width: 500px)
{
        header
        {
            margin-top: 55px;
            /*text-align: center;*/
        }        
        .column2 .row
        {
                margin: 0 0 40px 10px;
                width:auto;
        }
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #EDA28C;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
        header h1
        {
                font-size:40px;
        }
        
        header p
        {
                font-size:14px;
        }
        .header-flag
        {
                position: static;
                transform: none;
                display: block;
                text-align: center;
                padding: 5px 0 8px 0;
        }
}

/* ********************************************************** */
/* HILFSKLASSEN (analog Tailwind CSS) */
/* ********************************************************** */

.space-y-1 {
        margin-top: 0.25rem;
}
.space-y-2 {
        margin-top: 0.5rem;
}
.space-y-4 {
        margin-top: 1rem;
}
.space-y-8 {
        margin-top: 2rem;
}

.dates-list li {
        margin-top: 1rem;
}

.dates-list li:first-child {
        margin-top: 0;
}

/* ********************************************************** */
/* SHOW-SEKTIONEN (farbige Rahmen analog Kalender-Cards) */
/* ********************************************************** */

.show-frame {
        border-radius: 8px;
        padding: 7px;
        margin-bottom: 2rem;
}

.show-frame:first-child {
        margin-top: 2rem;
}

.show-frame[id] {
        scroll-margin-top: 1rem;
}

.show-frame:last-child {
        margin-bottom: 1rem;
}

.show-frame-inner {
        background-color: #1a1a1a;
        border-radius: 4px;
        padding: 20px 24px;
}

.show-frame-blue   { background-color: #2196f3; }
.show-frame-red    { background-color: #8b0000; }
.show-frame-purple { background-color: #9c27b0; }
.show-frame-orange { background-color: #ff9800; }
.show-frame-green  { background-color: #4caf50; }
.show-frame-gold   { background-color: #b8860b; }

/* Jobangebote-Kasten auf der Startseite (gelbe Variante der widerruf-box) */
#text_columns .job-box {
        border: 1px solid #fbea28;
        border-radius: 6px;
        padding: 20px;
        margin: 0 0 10px 0;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
}

#text_columns .job-box p {
        margin: 0;
}

/* Dezenter Hinweistext am Seitenende */
.page-note {
        margin-top: 50px;
        margin-bottom: -10px;
}


/* ********************************************************** */
/* KEYFRAMES */
/* ********************************************************** */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}