@charset "utf-8";
/* CSS Document */


/* ================================
   GRUNDLAYOUT
   ================================ */

body {
    background-color: #d8c3a5;
    color: #2f241f;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* ================================
   LINKS
   ================================ */

a:link {
    color: #1B1A1A;
    text-decoration: none;
}

a:hover {
    color: #2034EE;
    text-decoration: underline;
}
.navbar-nav .nav-link {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3pm;   
 
}

/* ================================
   HEADER / HERO
   ================================ */

.hero {
    background-image:
        linear-gradient(
            rgba(40, 25, 15, 0.45),
            rgba(40, 25, 15, 0.45)
        ),
        url("../images/parkplatz-4.JPG");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 65vh;

    display: flex;
    align-items: center;
    text-align: center;
}

/* Buttons unten im großen Header */

.hero-buttons {
    transform: translateY(80px);
    
}
/* Überschrift im Header */

.hero h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
}


/* Unterüberschrift im Header */

.hero h5 {
    font-size: 2.0rem;
    font-weight: 800;
    text-transform: uppercase;
}
/* Buttons unten im großen Header */

.hero-buttons {
    margin-top: 100px;
}

/* ================================
   SECTION TITEL
   ================================ */

.section-title {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
}


/* ================================
   KARTEN
   ================================ */

.card-custom {
    background: #d8c3a5;
    border: none;
    border-radius: 20px;
    padding: 15px;
    height: 100%;
    transition: 0.3s;
}

.card-custom:hover {
    transform: translateY(-5px);
}


.card-custom2 {
    background: #ff7f2a;
    border: none;
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    transition: 0.3s;
    -webkit-box-shadow: 2px 2px 8px #474545;
     box-shadow: 2px 2px 8px #474545;
   
}
.card-maps{
    background: #d8c3a5;
    border: none;
    border-radius: 20px;
    padding: 8px;
    height: 100%;
    transition: 0.3s;
    -webkit-box-shadow: 5px 5px 10px #474545;
     box-shadow: 5px 5px 10px #474545;
   
}


.card-custom3 {
    background-color: #D2D1D0;
    border: solid #706C6C;
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    transition: 0.3s;
    text-shadow: 2px 2px 1px #A5A2A2;
}


/* ================================
   GALERIE
   ================================ */

.gallery img {
    border-radius: 20px;
    height: 250px;
    object-fit: cover;
    width: 100%;
     -webkit-box-shadow: 4px 4px 8px #474545;
    box-shadow: 4px 4px 8px #474545;
}

.reser img {
    border-radius: 21px;
    -webkit-box-shadow: 5px 5px 10px 2px #636161;
    box-shadow: 5px 5px 10px 2px #636161;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
}


/* ================================
   BUTTONS
   ================================ */

.btn-orange {
    background: #ff7f2a;
    color: white;
    border-radius: 10px;
    padding: 8px 8px;
    margin: 5px;
    text-decoration: none;
      -webkit-box-shadow: 2px 2px 3px #474545;
    box-shadow: 2px 2px 3px #474545;
}

.btn-orange:hover {
    background: #a85d2a;
    color: white;
      -webkit-box-shadow: 2px 2px 3px #474545;
    box-shadow: 2px 2px 3px #474545;
}


.btn-orange2 {
    background: #999696;
    color: white;
    border-radius: 10px;
    padding: 5px 5px;
     margin: 5px;
    text-decoration: none;
      -webkit-box-shadow: 2px 2px 3px #474545;
    box-shadow: 2px 2px 3px #474545;
}

.btn-orange2:hover {
    background: #706C6C;
    color: white;
      -webkit-box-shadow: 2px 2px 3px #474545;
    box-shadow: 2px 2px 3px #474545;
}

/* ================================
   HINWEIS
   ================================ */

.hinweis {
    text-decoration: none;
    color: #F20B1D;
    font-style: normal;
    font-size: 1em;
}


/* ================================
   FOOTER
   ================================ */

footer {
    background: #c9ad8f;
    color: #383737;
    padding: 30px 0;
    text-align: center;
   font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: small;
}


/* ================================
   FOOTER NAVIGATION
   ================================ */

.footer-nav {
    background: #7f5539;
    color: #f5e9dc;
    border-top: 4px solid #ff7f2a;
}

.footer-nav .footer-heading {
    color: #ffcf99;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.footer-nav a {
    color: #f5e9dc;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-nav a:hover {
    color: #ffd166;
    text-decoration: none;
    padding-left: 3px;
}

.footer-nav .footer-links li {
    margin-bottom: 0.45rem;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.25);
}

/* ================================
   BUTTONS IM GROSSEN HEADER
   ================================ */

.hero-buttons {
    transform: translateY(70%);
}



/* ================================
   TABLET / SMARTPHONE
   ================================ */

@media (max-width: 768px) {

    .hero h1 {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .footer-nav {
        text-align: center;
    }

    .footer-nav .footer-heading {
        margin-top: 10px;
    }
}


/* ================================
   SMARTPHONE HEADER
   ================================ */

@media (max-width: 767px) {

    .hero {
        background-image:
            linear-gradient(
                rgba(40, 25, 15, 0.45),
                rgba(40, 25, 15, 0.45)
            ),
            url("../images/bikertreff-aussen-klein.png");

        min-height: 250px;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }


    /* Beschreibungstext im Handy-Header ausblenden */

    .hero p.lead {
        display: none;
    }


    /* Buttons auf dem Handy nach unten */

    .hero-buttons {
        transform: translateY(10px);
    }

}