body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #d4af37;
    font-size: 100%;
    margin: 0
}

header {
    background-color: #800;
    color: #d4af37;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 1000;
    clear: both;
    width: 100%;
}

h1, h2 {
    font-family: Arial;
    font-weight: 700;
    text-align: center
}

h2 {
    color: #800
}

p, p.center {
    font-family: Arial;
    font-size: 1.5rem
}

    p.center {
        text-align: center;
        color: #800
    }

.btext {
        font-family: Arial;
        font-size: 1.25rem;
        color: #000
    }

* {
    box-sizing: border-box
}

/* ===== NAVIGATION FIX ===== */

nav {
    position: relative;
    z-index: 2001; /* FIX #1 – Navigation kommt über den Header */
}

    nav ul {
        display: flex;
        flex-flow: row wrap;
        list-style: none;
        margin: 0;
        padding: 0 10px;
        overflow: visible;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
        background: #800;
        border-radius: 0.7em;
    }

    nav > ul > li {
        position: relative;
    }

        /* Dropdown */
        nav > ul > li > ul {
            display: none;
            position: absolute;
            z-index: 5000; /* FIX */
            top: 100%;
            left: 0;
            background: #800;
            border-radius: 0.7em;
            padding: 5px;
        }

        /* Hover öffnet Menü */
        nav > ul > li:hover > ul {
            display: block;
        }

        /* Sub-Dropdown */
        nav > ul > li > ul > li {
            position: relative;
        }

            nav > ul > li > ul > li > ul {
                display: none;
                position: absolute;
                z-index: 5000; /* FIX */
                top: 0;
                left: 100%;
                background: #800;
                border-radius: 0.7em;
            }

            nav > ul > li > ul > li:hover > ul {
                display: block;
            }

    /* Links */
    nav ul a {
        display: block;
        white-space: nowrap;
        padding: 10px;
        background: #d4af37;
        border-radius: 0.7em;
    }

    nav ul > li > ul > li a {
        background: #fcef8c;
        color: #800;
        font-weight: 700;
    }

span.a {
    display: block;
    background: #d4af37;
    color: #800;
    font-weight: 700;
    text-align: left;
    width: auto;
    /* height: 2.8em;  FIX #2 – entfernt */
    margin: .1em;
    border-radius: .7em;
    border: none;
    padding: .7em;
    overflow: hidden;
    cursor: pointer;
}

/* Buttons */
li a {
    background: #d4af37;
    color: #800;
    font-weight: 700;
    text-align: left;
    width: auto;
    /* height: 2.8em;  FIX #2 – entfernt */
    margin: .1em;
    border-radius: .7em;
    border: none;
    padding: .7em;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer
}

    li a:hover {
        background-color: #ffc300;
        color: #122383;
        border-radius: .5em;
        box-shadow: 1px 2px 3px #d4af37
    }

/* ===== REST UNVERÄNDERT ===== */

.responsive.left {
    padding: 0 6px;
    float: left;
    width: 49.99999%
}

.responsive.right {
    padding: 0 6px;
    float: right;
    width: 49.99999%
}

div.gallery {
    border: 1px solid #ccc
}

    div.gallery:hover {
        border: 1px solid #777
    }

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

div.desc {
    padding: 15px;
    text-align: center
}

@media only screen and (max-width:700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0
    }
}

@media only screen and (max-width:500px) {
    nav ul {
        flex-direction: column
    }

    .responsive {
        width: 100%
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both
}

.row::after {
    content: "";
    clear: both;
    display: table
}

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%
}

@media only screen and (min-width:600px) {
    .col-s-1 {
        width: 8.33%
    }

    .col-s-2 {
        width: 16.66%
    }

    .col-s-3 {
        width: 25%
    }

    .col-s-4 {
        width: 33.33%
    }

    .col-s-5 {
        width: 41.66%
    }

    .col-s-6 {
        width: 50%
    }

    .col-s-7 {
        width: 58.33%
    }

    .col-s-8 {
        width: 66.66%
    }

    .col-s-9 {
        width: 75%
    }

    .col-s-10 {
        width: 83.33%
    }

    .col-s-11 {
        width: 91.66%
    }

    .col-s-12 {
        width: 100%
    }
}

@media only screen and (min-width:768px) {
    .col-1 {
        width: 8.33%
    }

    .col-2 {
        width: 16.66%
    }

    .col-3 {
        width: 25%
    }

    .col-4 {
        width: 33.33%
    }

    .col-5 {
        width: 41.66%
    }

    .col-6 {
        width: 50%
    }

    .col-7 {
        width: 58.33%
    }

    .col-8 {
        width: 66.66%
    }

    .col-9 {
        width: 75%
    }

    .col-10 {
        width: 83.33%
    }

    .col-11 {
        width: 91.66%
    }

    .col-12 {
        width: 100%
    }
}

.tab1 {
    overflow: auto
}

.customers {
    font-family: verdana;
    font-size: 1.225em;
    border-collapse: collapse;
    width: 100%
}

    .customers td, .customers th {
        border: 1px solid #ddd;
        padding: 8px
    }

tr:nth-child(even) {
    background-color: #f2f2f2
}

.customers tr:hover {
    background-color: #ddd
}

.customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #800;
    color: #d4af37
}

img {
    width: 100%;
    height: auto;
    background-repeat: no-repeat;
    margin: .1em;
    text-align: center;
    border-radius: .7em;
    /* float: left;  FIX #4 – entfernt */
}

.img1 {
    width: 6em;
    height: 6em;
    box-shadow: 1px 2px 3px #d4af37
}

.img2 {
    width: 9em;
    height: 6em;
    box-shadow: 1px 2px 3px #d4af37
}

.img3 {
    width: 1em;
    height: 1em;
    text-align: left;
    border-radius: .3em;
    float: left
}

a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px
}

    a:hover {
        background-color: #ddd;
        color: #000
    }

.previous {
    background-color: #800;
    color: #ff0;
    text-align: center;
    padding: 14px 16px;
    width: auto;
    /* height: 2.8em; FIX #2 – entfernt */
    margin: .1em;
    border-radius: .7em
}

.next {
    background-color: #800;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    width: auto;
    /* height: 2.8em; FIX #2 – entfernt */
    margin: .1em;
    border-radius: .7em
}

li.s {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: .25em;
    border-radius: 1em;
    padding: 0 10px;
    /* float: left; FIX #5 – entfernt */
    overflow: hidden;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    background: #800
}

.button,
.button-weiter {
    background: #800;
    text-decoration: none;
    font-weight: 700;
    text-align: left;
    width: auto;
    /* height: 2.8em; FIX #2 – entfernt */
    border-radius: .7em;
    border: none;
    padding: .7em;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.button {
    color: #d4af37
}

.button-weiter {
    color: #fff
}

    .button-weiter:hover {
        background-color: #ffc300;
        color: #000
    }

.button-ort {
    color: #d4af37;
    background-color: #800
}

    .button-ort:hover {
        background-color: #ffc300;
        color: #000
    }

.tel_button {
    color: #fff;
    background-color: blue;
    width: 9em;
    text-decoration: none;
    font-weight: 700;
    text-align: left;
    /* height: 2.8em; FIX #2 – entfernt */
    border-radius: .7em;
    border: none;
    padding: .7em;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

    .tel_button:hover {
        background-color: #d4af37;
        color: #000
    }

.mehr_button {
    background-color: #ffc300;
    color: #800;
    text-decoration: none;
    font-weight: 700;
    text-align: left;
    width: auto;
    /* height: 6em; FIX #3 – entfernt */
    border-radius: .7em;
    border: none;
    padding: .7em;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

    .mehr_button:hover {
        background-color: #fcef8c;
        color: #122383
    }

/* MOBILE NAVIGATION */
.mobile-nav {
    display: none;
}

@media (max-width: 500px) {

    /* Desktop-Menü ausblenden */
    .nav-desktop {
        display: none !important;
    }

    .mobile-nav {
        display: block;
        position: relative;
        z-index: 9999;
    }

    /* Burger Icon */
    .burger {
        width: 35px;
        cursor: pointer;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999;
    }

        .burger span {
            display: block;
            height: 4px;
            width: 30px;
            background: #d4af37;
            margin: 6px 0;
            border-radius: 3px;
            transition: 0.3s;
        }

        /* Burger Animation */
        .burger.active span:nth-child(1) {
            transform: translateY(10px) rotate(45deg);
        }

        .burger.active span:nth-child(2) {
            opacity: 0;
        }

        .burger.active span:nth-child(3) {
            transform: translateY(-10px) rotate(-45deg);
        }

    /* Mobile Menü */
    .nav-mobile {
        background: #800;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease;
    }

        .nav-mobile.open {
            max-height: 2000px;
        }

        .nav-mobile ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-mobile li {
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .nav-mobile a,
        .nav-mobile span {
            display: block;
            padding: 15px;
            color: #d4af37; /* TEXT SICHTBAR */
            font-size: 1.1rem; /* TEXT SICHTBAR */
            text-decoration: none;
        }

        .nav-mobile span {
            cursor: pointer;
        }

        /* Untermenüs #600*/
        .nav-mobile li ul {
            display: none;
            background: #ffc300;
        }

        .nav-mobile li.open ul {
            display: block;
        }
}
@media (max-width: 600px) {
    .nav-mobile a,
    .nav-mobile span {
        color: #800;
    }
}