html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

.gusti_nav_logo {
    display: none;
}

#wrapper {
    max-width: 900px;
    width: unset;
}

#area_text {
    max-width: 610px;
    width: unset;
}

#area_footer {
    position: relative;
}

#div_footer_right {
    float: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

body[role=navigation],
#menuToggle {
    display: none;
}

#mob_header {
    display: none;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-color: #be0f00;
    height: 50px;
    border-color: #cccccc;
    -webkit-box-shadow: 2px 2px 10px #bbb;
    box-shadow: 2px 2px 10px #bbb;
    margin-bottom: 20px;
    -webkit-transition: ease 0.5s;
    -o-transition: ease 0.5s;
    transition: ease 0.5s;
}

.zwettler {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#area_content ul.logoul {
    margin: 6px 6px 6px 10px;
}

#area_content ul.logoul li {
    list-style: none;
    margin-left: 17px;
}

#area_content ul.logoul li:before {
    content: "";
    display: inline-block;
    height: 16px;
    width: 16px;
    background-image: url(/images/gusti_dot1.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    padding-left: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    margin-left: -26px;
}

ul.logoul li:hover:before {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

#area_text p {
    text-align: justify;
}

/* design waehlen */

.desi_1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: unset;
    min-width: 150px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.desi_0 {
    width: unset;
}

.area_yel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.sticky {
    position: fixed;
    top: 0;
}

.form_row {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-bottom: 6px;
}

.form_row > span {
    display: inline-block;
    width: 55%;
    text-align: left;
}

.form_row span:nth-child(1) {
    width: 40%;
}

@media screen and (max-width: 800px) {
    .area_yel {
        padding: 12px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .desi_1 {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    a.preview {
        margin-right: auto;
    }
}

@media screen and (max-width: 1000px) {
    #area_bild {
        width: 170px;
    }

    #area_bild img {
        width: 100%;
    }

    .allergene_box {
        width: calc(100% - 200px);
        float: right;
    }

    .area_box {
        padding: 12px;
    }
}

@media screen and (max-width: 870px) {
    #div_header_left_1,
    #div_header_left_2 {
        width: 160px;
        /*transition: all 0.5s;*/
        margin-right: 6px;
    }

    #div_header_left_1,
    #div_header_left_2,
    #div_header_right {
        padding: 3px 6px 6px 6px;
    }

    #div_header_left_1 ul,
    #div_header_left_2 ul {
        margin: 3px 3px 3px 6px;
    }

    #area_text.area_box {
        padding: 12px;
        float: right;
        width: 100%;
    }

    #area_text {
        max-width: 600px;
        width: calc(100% - 200px);
    }

    #area_content {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    table.leistungen {
    }

    table.leistungen th.comp,
    table.leistungen td.comp,
    table.leistungen td.rest {
        width: unset;
    }

    table.leistungen th,
    table.leistungen td {
        width: unset;
        padding: 2px 4px
    }

    table.leistungen td.comp {
        font-size: 12px;
    }
}

@media screen and (max-width: 700px) {
    #wrapper {
        margin-top: 70px;
    }

    #area_header {
        height: 90px;
        margin: auto;
        width: 60%;
        min-width: 250px;
    }

    #area_bild {
        display: none;
    }

    .area_box,
    #area_text {
        width: 100%;
        max-width: 100%;
    }

    #mob_header {
        display: block;
        position: fixed;
    }

    div#public_logo {
        float: none;
        margin-top: 0;
        text-align: center;
        margin: auto;
        height: 80px;
        border: 0;
    }

    div#public_logo img {
        height: 70px;
    }

    #div_header_right {
        position: fixed;
        top: 13px;
        right: 15px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 2px solid #f7f7f7;
        border-radius: 4px;
        padding: 3px 5px;
    }

    .referenzen_wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .area_ref_left {
        float: none;
        margin: 10px;
    }

    .gusti_nav_logo {
        display: block;
        position: fixed;
        top: 10px;
        margin-left: 45px;
    }
}

@media screen and (max-width: 640px) {
    #area_bild {
        width: 100px;
    }

    #area_bild img {
        width: 100%;
    }

    p.fakt_0_big {
        font-size: 15px;
    }

    .fakt_0 {
        width: 90px;
    }

    .fakt_1 {
        width: calc(100% - 90px);
    }
}

@media screen and (max-width: 450px) {
    table.leistungen td.comp {
        font-family: unset;
    }

    .table.leistungen td {
        font-size: 11px;
    }

    .zwettler > div {
        width: 100%;
        text-align: center;
    }

    .desi_1 {
        min-width: unset;
        /*width: 80px;*/
    }

    #area_header {
        height: 70px;
    }

    div#public_logo {
        height: 60px;
    }

    div#public_logo img {
        height: 50px;
    }

    .form_row span:nth-child(1),
    .form_row span {
        width: 100%;
        margin-bottom: 6px;
    }

    .formPub .buttons {
        text-align: left;
        margin: 10px 0 0 0;
    }

}

/*
.area_box ,  #area_content
{
  background-image: url(/images/logo_1.gif), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
*/