body {
    background-color: #f5f6f8;
   
}

.navbar {
    background-color: #71b7f5;
}


/* ========================================
   KALENDER
======================================== */

.calendar-wrapper {
    width: 100%;
}


.calendar-day {
    background-color: white;

    border-radius: 12px;

    min-height: 300px;

    overflow: hidden;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);
}


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

.calendar-header {
    background-color: #f8f9fa;

    padding: 12px;

    text-align: center;

    border-bottom: 1px solid #dee2e6;
}


.calendar-day-name {
    font-weight: 700;
}


.calendar-date {
    color: #202020;

    font-size: 0.9rem;

    margin-top: 2px;
}


/* ========================================
   BUCHUNGEN
======================================== */

.buchungen {
    padding: 10px;
}


.booking {
    background-color: #0d6efd;

    color: white;

    border-radius: 8px;

    padding: 10px;

    margin-bottom: 8px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.booking-joel{
    background-color: #6f42c1;
}
.booking-mama{
    background-color: #198754;
}
.booking-papa{
    background-color: #fd7e14;
}
.booking-yannik{
   background-color: #0d6efd
}

/* ========================================
   LEGENDE
======================================== */

.family-member {
    display: flex;
    align-items: center;
    gap: 8px;
}


.legend-color {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    display: inline-block;
}


.legend-joel {
   background-color: #6f42c1;
}


.legend-mama {
    background-color: #198754;
}


.legend-papa {
    background-color: #fd7e14;
}


.legend-yannik {
   background-color: #0d6efd
}


.booking:hover {
    transform: translateY(-2px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15);
}


.booking-time {
    font-size: 0.8rem;

    font-weight: 600;
}


.booking-name {
    font-weight: 700;

    margin-top: 3px;
}


.booking-purpose {
    font-size: 0.8rem;

    opacity: 0.9;
}


/* ========================================
   KEINE BUCHUNG
======================================== */

.keine-buchung {
    color: #adb5bd;

    text-align: center;

    font-size: 0.85rem;

    padding: 20px 5px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .calendar-day {
        min-height: auto;
    }

    .calendar-header {
        display: flex;

        justify-content: space-between;

        align-items: center;

        text-align: left;
    }

}




/* Schatten */

.card-body{
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
}
.calendar-wrapper{
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
}