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
}

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;
    }

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

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

        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;
            }

    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;
}

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
    }

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

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

.map-container {
    position: relative;
    width: 100%;
    max-height: 400px; /* optional: begrenzen */
    margin: 0 auto; /* zentrieren */
    aspect-ratio: 16 / 9;
    height: auto;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

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
}

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

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

.pagination a,
.previous,
.next {
    padding: 10px 15px;
    background: #800;
    text-decoration: none;
    border-radius: 6px;
}

.previous {
    color: #ff0;
}

.next {
     color: #fff;
 }

.pagination a:hover,
.previous:hover,
.next:hover {
     background: #ffc300;
     color: #000;
}

@media (max-width: 500px) {

.pagination {
     justify-content: center;
     row-gap: 12px; /* Abstand zwischen Zeilen */
     column-gap: 10px; /* Abstand nebeneinander */
}

.pagination a {
     flex: 1 1 auto;
     text-align: center;
           padding: 12px;
           color: #d4af37;
         }
.pagination .next {
        color: #fff;
}
 }

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

        .button-weiter {
         color: #fff;
         font-size: clamp(14px, 2.5vw, 20px);
        }

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

    .tel_button {
        color: #fff;
        background-color: #4A3B2A;
        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 .contact_button:hover {
            background-color: #ffc300;
            color: #000
        }

.contact_button {
    color: #fff;
    background-color: #4A3B2A;
    width: auto; /*15em;  breiter gemacht */
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    border-radius: .7em;
    border: none;
    padding: .7em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

   .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-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 {
            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.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);
            }
 
        .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;
        }
    }

    .kontakt {
        background: #4A3B2A;
        color: #EDEDED;
        padding: 60px 20px;
        text-align: center;
    }
    .kontakt h2 {
        color: #D4AF37;
    }
    .kontakt p {
        color: #fff;
    }
    .fahrzeugliste {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .fahrzeugliste li {
        margin-bottom: 10px;
    }

    .fahrzeugliste li a {
         display: block;
     }

.container {
    max-width: 1000px;
    margin: auto;
    padding: 20px
}

.card {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1)
}

    .card img {
        width: 100%;
        border-radius: 10px
    }

.cta {
    background: #800;
    color: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 18px
}

    .cta a {
        color: #fff;
        text-decoration: none;
        font-weight: bold
    }

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@supports not (gap: 20px) {
    .grid > * {
        margin: 10px;
    }
}