/* ===============================
   Grundlayout
=================================*/

#belegungskalender {
    max-width: 900px;
    margin: 20px auto;
    font-family: sans-serif;
}

/* ===============================
   Navigation
=================================*/

.calendar-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.nav-btn {
    background:#2c3e50;
    color:white;
    border:none;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
}

.nav-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}

/* ===============================
   Monatscontainer
=================================*/

.calendar-container {
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
    gap:20px;
}

.month {
    border:1px solid #ddd;
    padding:10px;
    border-radius:8px;
}

.month-title {
    text-align:center;
    font-weight:600;
    margin-bottom:10px;
}

/* ===============================
   Tage-Grid
=================================*/

.days {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    gap:0; /* wichtig für durchgehende Range */
}

.day {
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    position:relative;
    cursor:pointer;
    background:#e9f7ef;
    transition:background 0.15s ease;
}

/* ===============================
   Buchungsbalken
=================================*/

.day.booked-start,
.day.booked-mid,
.day.booked-end {
    background:#BA6852;
    color:white;
}

.day.booked-start {
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}

.day.booked-end {
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}

/* ===============================
   Deaktivierte Tage
=================================*/

.day.disabled {
    background:#f5f5f5;
    color:#bbb;
    cursor:not-allowed;
}

/* ===============================
   Auswahlbereich (Hintergrund)
=================================*/

.day.range-start,
.day.range-mid,
.day.range-end {
    background: rgba(231, 76, 60, 0.35);
}

.day.range-start {
    background: rgba(231, 76, 60, 0.35);
}

.day.range-end {
    background: rgba(231, 76, 60, 0.35);
}


/* ===============================
   Legende
=================================*/

.calendar-legend {
    margin-top:20px;
    font-size:0.9rem;
}

.legend-item {
    display:flex;
    align-items:center;
    margin-bottom:6px;
}

.legend-box {
    width:18px;
    height:18px;
    margin-right:8px;
    border-radius:4px;
}

.legend-booked {
    background:#BA6852;
}

.legend-free {
    background:#e9f7ef;
}

/* ===============================
   Responsive Optimierung
=================================*/

@media (max-width:600px){

    .calendar-container {
        grid-template-columns: 1fr;
    }

    .day {
        font-size:0.8rem;
    }

    .nav-btn {
        padding:5px 10px;
    }
}