.lebrows-layout-card {
    max-width: 800px;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    color: #6c757d
}

.lebrows-footer-card {
    max-width: 800px;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    color: #6c757d
}

*, *::before, *::after {
    box-sizing: border-box
}

body {
    flex-direction: column;
    min-height: 100vh;
    padding-top: 100px; /* Dieser Wert beeinflusst, wann der Content unter der Navbar startet */
    overflow-x: hidden
}

.navbar-brand img {
    border-radius: 10px;
    transition: transform .3s ease;
    background-color: rgba(0, 0, 0, 0);
    border: none
}

.navbar-brand:hover {
    background-color: rgba(0, 0, 0, 0)
}

.navbar-brand img:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0);
    border: none
}

nav a:hover {
    background-color: #ddd;
    color: #555
}

.navbar-nav a:hover {
    color: #555 !important
}

.card {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
}

/* Galerie Layout im Insta-Stil (CSS Grid) */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px; 
    padding: 20px;
    margin: auto;
    max-width: 1000px; 
}

/* Bilder als quadratische Thumbnails */
.gallery img {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.gallery img:hover {
    transform: scale(1.03); 
    filter: brightness(0.9);
}

/* Videos ebenfalls als quadratische Kacheln */
.gallery video {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    background-color: #000;
}

/* NEU: Altes Layout für die Videos auf der Startseite (Zuletzt bei Le Brows) */
.video-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 20px;
    margin: auto;
}

.video-showcase video {
    width: 100%;
    height: auto;
    border-radius: 5px;
    max-height: 85vh;
    max-width: 500px;
}

#overlay-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    flex-direction: column;
    text-align: center
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    flex-direction: column;
    text-align: center
}

h2 {
    font-weight: 300
}

h5 {
    font-weight: 400
}

.image-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s ease-in-out
}

.image-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15) !important
}

.image-card .card-img-top.disabled {
    filter: grayscale(100%) brightness(0.7)
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .3s ease
}

.image-card:hover .image-overlay {
    opacity: 1
}

.image-overlay .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

#calendar {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

/* Modals (Alte Custom-Modals beibehalten für Kalender etc.) */
.old-modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* WICHTIG: Das hier war der Auslöser für das dunkle Bild! Bootstrap bringt seinen eigenen Hintergrund (Backdrop) mit.
       Wenn wir hier nochmal rgba(0,0,0,0.5) drüber legen, wird es doppelt so dunkel. 
       Ich habe es entfernt, damit die Helligkeit normal bleibt. */
}

/* Bootstrap Kompatibilität wiederherstellen für Modal */
.old-modal.fade {
    display: none; 
}
.old-modal.show {
    display: block; 
}

.old-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 8px
}

/* Bootstrap Modal Content Überschreibung rückgängig machen für Lightbox */
#lightboxModal .modal-content {
    background-color: transparent;
    border: none;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Garantiert die Helligkeit des vergrößerten Bildes */
#lightboxImage {
    filter: brightness(1) !important;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer
}

.close-modal:hover {
    color: #000;
    text-decoration: none
}

#appointment-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold
}

#appointment-form input, #appointment-form select {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box
}

#appointment-form .btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

@media(max-width: 600px) {
    body {
        overflow-x: hidden;
        max-width: 100vw
    }
    
    /* Etwas kleinere Kacheln auf dem Handy */
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
        padding: 10px;
    }
}