:root {
    --brown: #493E3F;
}

    html, body {
        margin: 0;
        height: 100%;
        color: #3F3F3F;
        font-family: Trebuchet MS,Times,Arial,Helvetica,Sans-Serif;
        font-size: 15px;
        text-align: center;
    }

    .terminbuchung-trigger {
        padding: 6px 10px;
        font-size: 120%;
        border-radius: 6px;
        position: relative;
        top: 5px;
    }

/* Overlay-Standardzustand */
#overlay {
    position: relative;
    width: 100%;
    height: 100%;
    display: none; /* ausgeblendet */
    align-items: center;
    z-index: 1000;
}

#rezept.close {
    display: none;
}

#overlay.open {
    display: block;
}

/* Inhalt */
#overlay .content {
    background: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 1rem;
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}


img {
        border: 0px;
    }

    input,select,textarea {
        font-size: 13px;
        font-family: Trebuchet MS,Times,Arial,Helvetica,Sans-Serif;

    }
    table,tr,td {
        font-size: 14px;
        font-family: Trebuchet MS,Times,Arial,Verdana,Helvetica,sans-serif;
    }

    h1 {
        font-size: 19px;
        margin: 0 0 0px 0;
        padding: 0 0 0 0px;
    }

    h2 {
        font-size: 18px;
        margin: 0px 0 0px 0;
        padding: 0 0 0 0px;
        font-weight: normal;
    }

    h3 {
        margin: 0.5em 0 0.5em 0;
        padding: 0;
        font-size:1.2em;
    }
    a {
        text-decoration: underline;
        color: #3F3F3F;
    }

    small a {
        text-decoration: underline;
        color: #FFF!important;
    }

    p.bodytext {
        margin: 6px 0 6px 0;
        padding: 0;
    }

    p.bodytext a {
        color: #3F3F3F;
        text-decoration: underline;
    }

    div.divider {
        clear: both;
        visibility: hidden;
        height: 20px;
    }

    #top {
        float: left;
        width: 1px; height: 50%;
        margin-bottom: -12em;
    }

    /*********************** Kopf ************************************/

    #container_head {
        width: 100%;
        height: 55px;
        background: transparent url('../Images/bg_oben.jpg') bottom left repeat-x;
        padding: 60px 0 0 0;
    }

    #head {
        margin: 0 auto;
        width: 1020px;
        text-align: left;
        border: 0px solid #000;
    }

    #head_names {
        width: 200px;
        margin: 0 0 0 230px;
        float: left;
        background: transparent url('../Images/linie.gif') 0px 18px no-repeat;
        font-size: 18px;
        font-weight: bold;
    }

    #head_names a {
        text-decoration: none;
    }

    /************************** Hauptteil *************************/

    #meldung {
        padding: 0px 10px;
        margin: 0 0 10px 0;
        border: 1px solid #FFF;
        background: rgba(255,255,255,0.3);
    }

    #meldung p {
        font-size: 18px;
    }


    #container_main {
        width: 100%;
        background-color: #493E3F;
        padding: 0;
        margin: 0;
    }

    #main {
        margin: 0 auto;
        width: 1020px;
        text-align: left;
    }

    #left {
        float:left;
        width: 219px;
        height: 400px;
        margin: -115px 10px 0 0px;
        padding: 0;
        z-index: 1;
    }

    #steine_oben {
        width: 219px;
        height: 593px;
        background: transparent url('../Images/steine_oben2.jpg') top center no-repeat;
        z-index: 5;
        position: relative;
    }

    #steine_unten {
        width: 219px;
        height: 81px;
        background: transparent url('../Images/steine_unten2.png') top center no-repeat;
        padding: 0 0 0 0px;
        z-index: 4;
        position: relative;
    }

    #steine_unten img {
        margin-top: -110px;
    }

    #middle {
        float: left;
        width: 435px;
        margin: 5px 15px 12px 0px;
        padding: 0px;
        color: #FFF;
    }

    #middle a {
        text-decoration: underline;
        color: #FFF;
    }

    #right {
        float:left;
        width: 331px;
        height: 478px;
        margin: -0;
        padding: 0;
    }

    #middle_names {
        width: 200px;
        height: 50px;
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
    }

    #content_big {
        width: 760px;
    }

    #content {
        padding: 0;
        margin: 15px 0 0 0;
    }

    #content ul {
    }
    #content ul li {
        padding-left: 11px;
        line-height: 1.3em;
    }

    #content ol {
        margin: 5px 0 5px 0;
        padding: 0 0 0 17px;
    }

    #content ol li {
        margin:0;
        padding: 0;
    }

    div.small {
        width: 175px;
        float: left;
        margin-right: 20px;
    }

    div.clearer {
        clear: both;
        margin: 0;
        padding: 0;
    }

    /********************* Fuss ******************************/

    #container_bottom {
        width: 100%;
        height: 107px;
        background: transparent url('../Images/bg_unten.jpg') top left repeat-x;
        padding: 10px 0 0 0;
        z-index: 3;
        position: relative;
    }

    #bottom {
        margin: 0 auto;
        width: 1020px;
        text-align: right;
    }

    #adresse {
        padding: 0 18px 0 0px;
        font-size: 16px;
    }

    #adresse a {
        text-decoration: underline;
    }


    /************** Menü **************************/
    #menu {
        margin: 0px 0 0 0px;
        padding: 0px;
        float: right;
    }

    #menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 0px solid black;
    }

    #menu ul li {
        padding: 0;
        margin: 0px 4px;
        float:left;
    }

    #menu ul li a {
        display: block;
        text-decoration: none;
        font-weight: normal;
        color: #5E5657;
        padding: 2px 3px 2px 3px;
        font-size: 14px;
        text-transform: uppercase;
    }

    #menu ul li:hover, #menu ul li.menu_act {
        background-color: #c7c2c2;
    }

    #menu ul li.menu_act {
        background-color: #c7c2c2;
        padding: 0;
    }

    #menu ul li.menu_act a {
        /*padding-left: 0px;*/
    }



    #menu ul li a:hover, #menu ul li.menu_act a {
        background-color: #c7c2c2;
        color: #473A3A;
    }


    #menu ul li.menu_act ul li {
        padding: 0;
        margin: 0;
        background-color: #c7c2c2;
    }

    #menu ul li.menu_act ul li a {
        color: #2F2727;
        font-size: 13px;
        background-color: #c7c2c2;
        padding: 2px 0 2px 15px;
    }

    #menu ul li.menu_act ul li:hover, #menu ul li.menu_act ul li.menu_act {
        background-color: #c7c2c2;
    }

    #menu ul li.menu_act ul li a:hover, #menu ul li.menu_act ul li.menu_act a {
        background-color: #c7c2c2;
    }


    /****************** Menü2 **********************************/

    #menu2 {
        margin: 5px 0 0 239px;
        padding: 0px;
        width: 319px;
        float: left;
    }

    #menu2 ul {
        list-style: none;
        padding: 0;
        margin: 0;

    }

    #menu2 ul li {
        padding: 0;
        margin: 0px 7px;
        float:left;
    }

    #menu2 ul li a {
        display: block;
        text-decoration: none;
        font-weight: normal;
        color: #5E5657;
        padding: 2px 3px 2px 3px;
        font-size: 14px;
    }

    #menu2 ul li:hover, #menu2 ul li.menu2_act {
        text-decoration: underline;
    }

    #menu2 ul li.menu2_act {
        text-decoration: underline;
        padding: 0;
    }

    #menu2 ul li.menu2_act a {
        text-decoration: underline;
    }



    #menu2 ul li a:hover, #menu2 ul li.menu2_act a {
        text-decoration: underline;
        color: #473A3A;
    }


    #menu2 ul li.menu2_act ul li {
        padding: 0;
        margin: 0;
        text-decoration: underline;
    }

    #menu2 ul li.menu2_act ul li a {
        color: #2F2727;
        font-size: 13px;
        text-decoration: underline;
        padding: 2px 0 2px 15px;
    }

    #menu2 ul li.menu2_act ul li:hover, #menu2 ul li.menu2_act ul li.menu2_act {
        text-decoration: underline;
    }

    #menu ul li.menu2_act ul li a:hover, #menu ul li.menu2_act ul li.menu2_act a {
        text-decoration: underline;
    }


    div#menu_mobile, div.slicknav_menu {
        display: none;
    }


    div#middleMobile {
        display: none;
        margin-bottom: 10px;
    }

    div#middleMobile img {
        width: 100%;
        height: auto;
        border-bottom: 1px solid #FFF;
    }


    /******************* Mobil *************************/


    @media only screen and (max-width: 350px) {
        #head_names {
            font-size: 16px;
        }


    }


    @media only screen and (max-width: 550px) {
        div#middleMobile {
            display: block;
        }
    }

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

        body {
            font-size: 16px;
            height: auto;
        }



        /************************ head *************************/

        body > header {
            padding: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        #container_head {
            height: auto;
            width: auto;
            padding: 0 10px;
        }

        #container_head div#head {
            width: 100%;
            padding: 15px 0;
            background: url("../Images/LogoMobile.png") center left no-repeat;
        }

        #head_names {
            padding: 0 0 0 42px;
            margin: 0;
            width: auto;
            float: none;
        }

        /******************** main ************************************/

        div#main {
            width: 100%;
            padding: 0;
        }

        #container_main {
            padding: 0 10px;
            width: auto;
        }

        div#middle {
            width: 100%;
            margin: 14px 15px 12px 0px;
        }

        div#menu, div#left, div#right  {
            display: none;
        }




        #middle_names {
            width: auto;
            height: auto;
        }

        /*********************** Fuss ***************************/

        div#container_bottom {
            height: auto;
            padding: 10px 0;
        }

        div#bottom {
            width: 100%;
        }

        div.slicknav_menu {
            display: block;
        }

        div.slicknav_nav a.active {
            background-color: #c7c2c2;
        }





        /*!
       * SlickNav Responsive Mobile Menu v1.0.10
       * (c) 2016 Josh Cope
       * licensed under MIT
       */
        .slicknav_btn {
            position: relative;
            display: block;
            vertical-align: middle;
            float: right;
            padding: 0.438em 0.625em 0.438em 0.625em;
            line-height: 1.125em;
            cursor: pointer;
            z-index: 1;
        }

        .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
            margin-top: 0.188em; }

        .slicknav_menu {
            *zoom: 1; }
        .slicknav_menu .slicknav_menutxt {
            display: block;
            line-height: 1.188em;
            float: left; }
        .slicknav_menu .slicknav_icon {
            float: left;
            width: 1.125em;
            height: 0.875em;
            margin: 0.188em 0 0 0.438em; }
        .slicknav_menu .slicknav_icon:before {
            background: transparent;
            width: 1.125em;
            height: 0.875em;
            display: block;
            content: "";
            position: absolute; }
        .slicknav_menu .slicknav_no-text {
            margin: 0; }
        .slicknav_menu .slicknav_icon-bar {
            display: block;
            width: 1.125em;
            height: 0.125em;
            -webkit-border-radius: 1px;
            -moz-border-radius: 1px;
            border-radius: 1px;
            -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
            -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
        .slicknav_menu:before {
            content: " ";
            display: table; }
        .slicknav_menu:after {

            clear: both; }

        .slicknav_nav {
            clear: both; }
        .slicknav_nav ul {
            display: block; }
        .slicknav_nav li {
            display: block; }
        .slicknav_nav .slicknav_arrow {
            font-size: 0.8em;
            margin: 0 0 0 0.4em; }
        .slicknav_nav .slicknav_item {
            cursor: pointer; }
        .slicknav_nav .slicknav_item a {
            display: inline; }
        .slicknav_nav .slicknav_row {
            display: block; }
        .slicknav_nav a {
            display: block; }
        .slicknav_nav .slicknav_parent-link a {
            display: inline; }

        .slicknav_brand {
            float: left; }

        .slicknav_menu {
            font-size: 16px;
            box-sizing: border-box;
            background: #4c4c4c;
            padding: 0px 5px 0 5px;
        }

        .slicknav_menu * {
            box-sizing: border-box; }
        .slicknav_menu .slicknav_menutxt {
            color: #fff;
            font-weight: bold;
            text-shadow: 0 1px 3px #000; }
        .slicknav_menu .slicknav_icon-bar {
            background-color: #fff; }

        .slicknav_btn {
            margin: 10px 5px 10px 5px;
            text-decoration: none;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            background-color: #493E3F;
        }

        .slicknav_nav {
            color: #fff;
            margin: 0;
            padding: 0 0 8px 0;
            font-size: 0.875em;
            list-style: none;
            overflow: hidden;
            border-bottom: 1px solid #FFF;
        }

        .slicknav_nav ul {
            list-style: none;
            overflow: hidden;
            padding: 0;
            margin: 0 0 0 20px; }
        .slicknav_nav .slicknav_row {
            padding: 5px 10px;
            margin: 2px 5px; }
        .slicknav_nav .slicknav_row:hover {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            background: #ccc;
            color: #fff; }
        .slicknav_nav a {
            padding: 5px 10px;
            margin: 2px 5px;
            text-decoration: none;
            color: #fff;
            font-size: 18px;
        }

        .slicknav_nav a:hover {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            background: #ccc;
            color: #222; }
        .slicknav_nav .slicknav_txtnode {
            margin-left: 15px; }
        .slicknav_nav .slicknav_item a {
            padding: 0;
            margin: 0; }
        .slicknav_nav .slicknav_parent-link a {
            padding: 0;
            margin: 0; }

        .slicknav_brand {
            color: #fff;
            font-size: 18px;
            line-height: 30px;
            padding: 7px 12px;
            height: 44px; }

    }

@media (min-width: 550px) {
    .terminbuchung-trigger {
        float: right;
        top: -25px;
        right: 40px;

    }
}


@media (min-width: 950px) {
    .terminbuchung-trigger {
        top: -35px;
    }
}