.bcs-calendar {
    --bcs-grid-color: #b1b1b1;
    --bcs-grid-width: 1px;
}

/* Grid Tageszellen (nur buchbare Tage bekommen Gitternetzlinien) */
.bcs-calendar td.fc-daygrid-day {
    border: 0 !important;
    box-shadow:
        inset calc(-1 * var(--bcs-grid-width)) 0 0 var(--bcs-grid-color),
        inset 0 calc(-1 * var(--bcs-grid-width)) 0 var(--bcs-grid-color) !important;
}

/* Grid Header */
.bcs-calendar th.fc-col-header-cell {
    border: 0 !important;
    box-shadow:
        inset calc(-1 * var(--bcs-grid-width)) 0 0 var(--bcs-grid-color),
        inset 0 calc(-1 * var(--bcs-grid-width)) 0 var(--bcs-grid-color) !important;
}

.bcs-calendar,
.bcs-calendar .fc-view-harness,
.bcs-calendar .fc-view {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.bcs-calendar .fc-view-harness {
    padding: 0 !important;
}

/*
 * Quadratische Tageszellen.
 * Die Zellbreite ergibt sich aus der Kalenderbreite / 7 Spalten. Durch
 * aspect-ratio: 1 wird die Zellhoehe an die Breite gekoppelt, sodass die
 * Felder (annaehernd) quadratisch sind und horizontal wie vertikal gleich
 * mitskalieren. Der Kalender muss dafuer height="auto" verwenden, damit die
 * Gesamthoehe dem Inhalt (den quadratischen Zellen) folgt.
 */
.bcs-calendar .fc-daygrid-day-frame {
    aspect-ratio: 1 / 1;
    min-height: 0 !important;
    height: 100%;
    box-sizing: border-box;
}

/* FullCalendar setzt sonst eine Mindesthoehe fuer den Events-Bereich. */
.bcs-calendar .fc-daygrid-day-events {
    min-height: 0 !important;
}

/* Zeilen nicht dehnen – sonst werden Zellen wieder rechteckig. */
.bcs-calendar .fc-daygrid-body,
.bcs-calendar .fc-daygrid-body table,
.bcs-calendar .fc-scrollgrid-sync-table {
    height: auto !important;
}

/*
 * Deaktivierte Tage (Vergangenheit + nach dem Anzeige-Enddatum):
 * ausgegraut und ohne Gitternetzlinien (nur buchbare Tage haben das Grid).
 */
.bcs-calendar td.fc-daygrid-day.bcs-past,
.bcs-calendar .bcs-past .fc-daygrid-day-frame {
    background: #ededed !important;
    color: #b1b1b1;
}

.bcs-calendar td.fc-daygrid-day.bcs-past {
    box-shadow: none !important;
}

.bcs-calendar td.fc-daygrid-day.bcs-past .fc-daygrid-day-number {
    color: #b1b1b1;
    opacity: 0.7;
}

/*
 * Gemeinsame, externe Navigationsleiste ([bookingcal_nav]).
 * 2-Spalten-Grid mit je 50 %: linke Spalte Buttons rechtsbuendig, rechte
 * Spalte Titel linksbuendig. Dadurch bleibt die Mitte fix und die Buttons
 * springen nicht, egal wie lang der Monatsname ist.
 */
.bcs-calendar-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 1em;
    margin-bottom: 0.75em;
}

.bcs-calendar-nav .bcs-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Buttons rechtsbuendig in linker Spalte */
    gap: 0.5em;
}

/*
 * Buttons im Look des "Jetzt buchen"-Buttons (schwarz).
 * Das schwarze Styling kommt bei Elementor aus einer element-spezifischen
 * Regel (an die Widget-ID gebunden) und greift daher nicht automatisch ueber
 * die generischen .elementor-button-Klassen – deshalb hier explizit.
 */
.bcs-calendar-nav .bcs-nav-btn {
    cursor: pointer;
    /* Schrift der Seite erben (nicht Browser-Default fuer <button>). */
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 4px;
    box-shadow: none !important;
    /* Einheitliche Groesse fuer alle Buttons. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Chevron-Buttons quadratisch/kompakt, aber gleich hoch wie "Heute". */
.bcs-calendar-nav .bcs-nav-btn[data-bcs-nav="prev"],
.bcs-calendar-nav .bcs-nav-btn[data-bcs-nav="next"] {
    min-width: 40px;
    padding: 0 12px;
    font-size: 18px;
}

.bcs-calendar-nav .bcs-nav-btn .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bcs-calendar-nav .bcs-nav-btn .elementor-button-text {
    color: #fff !important;
    font: inherit;
}

.bcs-calendar-nav .bcs-nav-btn:hover,
.bcs-calendar-nav .bcs-nav-btn:focus {
    background-color: #333 !important;
    color: #fff !important;
}

/* Zurueck-Button gesperrt (aktueller Monat erreicht). */
.bcs-calendar-nav .bcs-nav-btn[disabled],
.bcs-calendar-nav .bcs-nav-btn.fc-button-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.bcs-calendar-nav .bcs-nav-title {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
    text-align: left; /* Titel linksbuendig in rechter Spalte */
}

/* Kombinierte Ansicht: EG/OG-Beschriftung in den Tageszellen */
.bcs-calendar.bcs-combined .fc-daygrid-day-frame {
    position: relative;
}

.bcs-calendar.bcs-combined .bcs-unit-labels {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 2px 4px;
    pointer-events: none;
    z-index: 1;
}

.bcs-calendar.bcs-combined .bcs-unit-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    color: #333;
    opacity: 0.75;
}